HTML Form
HTML Form
Embedded Files
An HTML Form is a section of the document that collects input from the user. The input from the user is generally sent to a server (Web servers, Mail clients, etc). We use the HTML <form> element to create forms in HTML.
The HTML <form> element is used to create HTML forms. For example,
<form>
<label for="firstname">First name: </label>
<input type="text" name="firstname" required>
<br>
<label for="lastname">Last name: </label>
<input type="text" name="lastname" required>
<br>
<label for="email">email: </label>
<input type="email" name="email" required>
<br>
<label for="password">password: </label>
<input type="password" name="password" required>
<br>
<input type="submit" value="Login!">
</form>
HTML Form Elements
HTML Form Elements
A form contains special interactive elements that users use to send the input. They are text inputs, textarea fields, checkboxes, dropdowns, and much more. For example,
<form>
<label for="name">Name:</label>
<input type="text" name="name"><br><br>
<label for="sex">Sex:</label>
<input type="radio" name="sex" id="male" value="male">
<label for="male">Male</label>
<input type="radio" name="sex" id="female" value="female">
<label for="female">Female</label> <br><br>
<label for="country">Country: </label>
<select name="country" id="country">
<option>Select an option</option>
<option value="nepal">Nepal</option>
<option value="usa">USA</option>
<option value="australia">Australia</option>
</select><br><br>
<label for="message">Message:</label><br>
<textarea name="message" id="message" cols="30" rows="4"></textarea><br><br>
<input type="checkbox" name="newsletter" id="newsletter">
<label for="newsletter">Subscribe?</label><br><br>
<input type="submit" value="Submit">
</form
Form Attributes
Form Attributes
The HTML <form> element contains several attributes for controlling data submission. They are as follows:
action
The action attributes define the action to be performed when the form is submitted. It is usually the url for the server where the form data is to be sent.
<form action="/login">
<label for="email">Email:</label>
<input type="email" name="email"><br><br>
<label for="password">Password:</label>
<input type="password" name="password"><br><br>
<input type="submit" value="Submit">
</form>
In the above example, when the form is submitted, the data from the form is sent to /login
HTML Form Elements
HTML Form Elements
HTML form elements are used to store user input. There are different types of form elements such as the text box, check box, drop-down, submit button, etc. For example,
<form>
<label for="name">Name:</label>
<input type="text" name="name"><br><br>
<label for="sex">Sex:</label>
<input type="radio" name="sex" id="male" value="male">
<label for="male">Male</label>
<input type="radio" name="sex" id="female" value="female">
<label for="female">Female</label> <br><br>
<input type="submit" value="Submit">
</form>
Browser Output
Here, <input> and <label> are all HTML Form Elements.
HTML Form Elements
HTML Form Elements
There are various HTML form elements for various input types. The form elements available in HTML5 are as follows:
HTML <input> tag
HTML <label> tag
HTML <button> tag
HTML <select>, <option> and <optgroup> tags
HTML <textarea> tag
HTML <fieldset> tag
HTML <legend> tag
HTML <datalist> tag
HTML <output> tag
HTML <input> tag
HTML <input> tag
The HTML <input> tag defines the field where the user can enter data. For example,
<input type="text" name="firstname">
Browser Output
Here,
type - determines the type of input the <input> tag takes
name - specifies the name of the input
To learn more about the HTML input tag and its types, visit HTML Input Tag.
HTML <label> tag
HTML <label> tag
The HTML label tag is used to create a caption for a form element. The text inside the <label> tag is shown to the user.
<label for="firstname">First Name</label>
<input type="text" name="firstname" id="firstname">
Browser Output
The for attribute is used to associate a label with the form element. The value for the for attribute is set as the id of the form element which is firstname in the above example.
HTML Label is mainly used for accessibility as screen-readers read out the label associated with the field and it also improves user experience as clicking on the label also focuses on the input field.
This is also greatly helpful in small screens as it makes it easier to perform actions like focusing on input, selecting a checkbox, selecting a radio box, etc.
HTML <button> tag
HTML <button> tag
The HTML <button> element is an interactive element that is activated by a user with a mouse, keyboard, finger, voice command, or other assistive technology.
It performs a programmable action, such as submitting a form or opening a dialog when clicked. For example,
<button type="button">Click me</button>
Browser Output
The type attribute determines the action performed by clicking the button. It has 3 possible values:
submit
If the value of type is submit, the button click action submits the form. For example,
<form>
<label for="name">Name:</label>
<input type="text" name="name"><br><br>
<button type="submit">Submit</button>
</form>
Browser Output
reset
If the value of type is reset, the button click action resets the value of all form elements to their initial value. For example,
<form>
<label for="name">Name:</label>
<input type="text" name="name"><br><br>
<button type="reset">Reset</button>
</form>
Browser Output (before reset)
Browser Output (after reset)
button
If the value of type is button, the button click action does not have a default function. Generally, javascript is used to add functionality to such buttons. For example,
<button type="button">Click me</button>
Browser Output
HTML <select>, <option> and <optgroup> tags
HTML <select>, <option> and <optgroup> tags
The HTML <select> tag is used to create a menu of options. Each of the options is represented by the <option> tag. For example,
<label for="pets">Pets:</label>
<select id="pets">
<option value="dog">Dog</option>
<option value="cat">Cat</option>
</select>
Browser Output
Browser Output
Additionally, we can also group option elements inside the <optgroup> tag to create a group of options. For example,
<label for="pets">Pets:</label>
<select id="pets">
<optgroup label="Mammals">
<option value="dog">Dog</option>
<option value="cat">Cat</option>
</optgroup>
<optgroup label="Insects">
<option value="spider">Spider</option>
<option value="ants">Ants</option>
</optgroup>
<optgroup label="Fish">
<option value="goldfish">Goldfish</option>
</optgroup>
</select>
Browser Output
HTML <textarea> tag
HTML <textarea> tag
The HTML <textarea> tag is used to define a customizable multiline text input field. For example,
<textarea rows="10" cols="30"> Type something…</textarea>
Browser Output
Here, the rows and cols attributes represent the rows and columns of the text field.
HTML <fieldset> tag
HTML <fieldset> tag
The HTML <fieldset> tag is used to group similar form elements. It is a presentational tag and does not affect the data in the form. For example,
<form >
<fieldset>
<label for="firstname">First name:</label><br>
<input type="text" id="firstname" name="fname"><br>
<label for="lastname">Last name:</label><br>
<input type="text" id="lastname" name="lname"><br>
</fieldset>
</form>
Browser Output
Here, the border is from the <fieldset> element.
Page updated
Google Sites
Report abuse