Input Element

<input> This is the most commonly used element within HTML forms.

It allows you to specify various types of user input fields, depending on the type attribute.
An input element can be of type text field, password field, checkbox, radio button, submit button, reset button, file select box, etc.

Single-line text input controls are created using an <input> element, whose type attribute has a value of text.

Here's an example of a single-line text input (with a label) used to take username:

<form>

<label for="username">Username:</label>

</form>

Password fields are similar to text fields.

The only difference is: characters in a password field are masked (they are shown as asterisks or dots).
This is to prevent someone else from reading the password on the screen.

It is also a single-line text input controls created using an <input> element whose type attribute has a value of password.

Here's an example of a single-line password input used to take user password:

<form>

<label for="user-pwd">Password:</label>

</form>

Radio buttons are used to let the user select exactly one option from a pre-defined set of options.

It is created using an <input> element whose type attribute has a value of radio.

<form>

<label for="female">Female</label>

</form>

Checkboxes allow the user to select one or more option from a pre-defined set of options.

It is created using an <input> element whose type attribute has a value of checkbox.

<form>

<label for="soccer">Soccer</label>

<label for="cricket">Cricket</label>

<label for="baseball">Baseball</label>

</form>

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

<form>

<option value="sydney">Sydney</option>

<option value="paris">Paris</option>

<option value="austin">Austin</option>

</select>

</form>

A submit button is used to send the form data to a web server.

When the submit button is clicked, the form data is sent to the link or file specified in the form's action attribute to process the submitted data.

<label for="first-name">First Name:</label>

</form>

Lesson 6: Web Forms