HTML Form: Creating a basic form

This entry is part 1 of 10 in the series HTML Form

A form can be placed anywhere in the body of an HTML document. A form is enclosed in a 2-sided <form> tag.

<form method='post'>

</form>

The method attribute specifies what will happen when the form is submitted.  We can use either post or get attribute.

Within the <form> tag, we can specify an action attribute.  This is typically an email or a script that will run when the user submits the form.

For an email delivery, it looks typically as below.

<form action='mailto: johndoe@yahoo.com'>

This will trigger the default email to be launched in your PC.

To collect data from the form using a CGI script such as a php script, we use the following.

<form action='https://codecrawl.com/code/form.php'>

You can refer to an earlier form that I have created using HTML and Javascript.

Try The Code

HTML Form: Creating a text box

This entry is part 2 of 10 in the series HTML Form

We start by creating a very simple text box.

<input type='text' name='name'>

Say you need to ask for the name of the user.

You can create a textbox form as below.

<!DOCTYPE html>
<html>
<head lang='en'>     
    <meta charset='UTF-8'>
    <title>Codecrawl.com-Form</title>

</head>
<body>

Name: <input type='text' name='name'>

</body>
</html>
Text Box

HTML Form: Width of the text box

This entry is part 3 of 10 in the series HTML Form

Without specifying the width of the textbox, the size of the box is 20 pixels.

We can specify the size of the text box using pixel, for example 30px.

size='30px'

The HTML script will look like below.

<!DOCTYPE html>
<html>
<head lang='en'>     
    <meta charset='UTF-8'>
    <title>Codecrawl.com-Form</title>
</head>
<body>

Phone: <input type='text' name='phone' size='30px'>
Name: <input type='text' name='name'>

</body>
</html>


Width of Textbox

HTML Form: Multiline textbox using textarea

This entry is part 4 of 10 in the series HTML Form

To create a multiline textbox or textarea, we use <textarea> tag.

The <textarea> tag contains a rows attribute that specifies the number of lines of text in the box.

<textarea name='comment' rows='3'></textarea>
Text Area
<!DOCTYPE html>
<html>
<head lang='en'>     
 <meta charset='UTF-8'>
 <title>Codecrawl.com-Form</title>

</head>
<body>
<br>
Name: <input type='text' name='name'>
<br>
Phone: <input type='text' name='phone'>
<br>

Comments:
<br>
<textarea name='comment' rows='3'></textarea>

</body>
</html>

The column attribute that specifies how many characters wide the text area will be can also be added.

<textarea name='comment' rows='3' cols='50'></textarea>


Text Area Output

HTML Form: Creating a Submit or Reset button

This entry is part 5 of 10 in the series HTML Form

For a form, we would need to include a Submit button on the form so that visitors can send the information to us.

The default button text is Submit, but we can use a value attribute to display different text on the button.

<!DOCTYPE html>
<html>
<head lang='en'>     
    <meta charset='UTF-8'>
    <title>Codecrawl.com-Form</title>

</head>
<body>
<br>
Name: <input type='text' name='name'>
<br>
Phone: <input type='text' name='phone'>
<br>

Comments:
<br>
<textarea name='comment' rows='3'></textarea>
<br>
<input type='submit' value='Send'>
<input type='reset' value='Clear'>

</body>
</html>