Online Web Development Tutorials

The HTML <form> element defines a form that is used to collect different kinds of user inputs such as name, email, contact number etc.

An HTML form contains elements called controls like input box, check boxes, radio buttons, textarea, submit buttons etc.The <form> tag is used to create an HTML form.

Form Tags
Tag	Description
`<form>`	It defines an HTML form to enter inputs by the used side.
`<label>`	It defines a label for an input element.
`<fieldset>`	It groups the related element in a form.
`<legend>`	It defines a caption for a <fieldset> element.
`<input>`	It defines an input control.
`<textarea>`	It defines a multi-line input control.
`<select>`	It defines a drop-down list.
`<optgroup>`	It defines a group of related options in a drop-down list.
`<option>`	It defines an option in a drop-down list.
`<button>`	It defines a clickable button.

HTML Login Form

Below the example of a login form.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML Login Form Example</title>
</head>
<body>
    <form>
      <fieldset>
        <legend>Log In</legend>
        <label>Username: <input type="text"></label>
        <label>Password: <input type="password"></label>
        <input type="submit" value="Submit">
      </fieldset>
    </form>
 </body>
</html>

HTML TextField Control

The type="text" attribute of input tag <input /> creates textfield control also known as textfield control. Text fields are one line areas that allow the user to input text.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML Text Field Example</title>
</head>
<body>
    <form>
        <label for="username">Username:</label>
		<input type="text" name="username" id="username" placeholder="Enter Username" />
    </form>
 </body>
</html>

HTML Password Control

Password fields are similar to text fields. The password is not visible to the user in password field control. The only difference is; characters in a password field are masked i.e. shown as asterisks or dots.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML Password Field Example</title>
</head>
<body>
    <form>
        <label for="password">Password:</label>
		<input type="password" name="password" id="password" placeholder="Enter Password" />
    </form>
 </body>
</html>

HTML Radio Button Or Option Button Control

It is used to select one from pre-defined set of options.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Radio Button Or Option Button Example</title>
</head>
<body>
    <form>
        <label for="gender">Gender:</label><br />
		Male <input type="radio" name="gender" id="gender" value="male" />
		Female <input type="radio" name="gender" id="gender" value="female" />
    </form>
 </body>
</html>

HTML Checkbox Control

It is used to select one or more option from pre-defined set of options.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML Checkbox Control</title>
</head>
<body>
    <form>
        <label for="hobby">Hobby:</label>
		Cricket <input type="checkbox" name="sports" id="cricket" value="cricket" />
		Football <input type="checkbox" name="sports" id="football" value="football" />
		Tennis <input type="checkbox" name="sports" id="tennis" value="tennis" />
    </form>
 </body>
</html>

HTML File Select box

It enables the user to browse for a file.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML File Select box</title>
</head>
<body>
    <form>
        <label for="upload">File:</label>
		<input type="file" name="file" id="file" />
    </form>
 </body>
</html>

HTML Textarea

It is a multiple-line text input control that allows a user to enter more than one line of text.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML Textarea</title>
</head>
<body>
    <form>
        <label for="address">Address:</label>
		<textarea rows="4" cols="25" name="address" id="address"></textarea>
    </form>
 </body>
</html>

HTML Select Boxes

A select box is a dropdown list of options that allows user to select one or more option from a pull-down list of options.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML Select Boxes</title>
</head>
<body>
    <label for="select">Country:</label>
    <select>
        <option>India</option>
		<option>Sri Lanka</option>
		<option>Bangladesh</option>
    </select>
 </body>
</html>

HTML Submit and Reset Buttons

submit button is used to send the form data while reset button resets all the forms control to default values.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML Submit and Reset Buttons</title>
</head>
<body>
    <form action="#" method="post">
       <label for="name">Name:</label>
       <input type="text" name="name" id="name" />
       <input type="submit" value="Submit">
       <input type="reset" value="Reset">
    </form>
 </body>
</html>

HTML Form