What is the input element?

• The <input> tag specifies an input field where the user can enter data.

• The <input> element is the most important form element.

• The <input> element can be displayed in several ways, depending on the type attribute.

There are different types of input:-

• <input type="email">

• <input type="password">

• <input type="button">

• <input type="hidden">

• <input type="submit">

• <input type="text">

• <input type="url">

• <input type="search">

• <input type="checkbox">

• <input type="file">

1. Definition and Usage of <input type="email">

• The <input type="email"> defines a field for an e-mail address.

• The input value is automatically validated to ensure it is a properly formatted e-mail address.

• To define an e-mail field that allows multiple e-mail addresses, add the "multiple" attribute.

Syntax:-

<input type="email">

Example:-

<label for="email">Enter your email:</label>
<input type="email" id="email" name="email">

2. Definition and Usages of <input type="password">

• The <input type="password"> defines a password field (characters are masked).

Note:- Any forms involving sensitive information like passwords should be served over HTTPS.

Syntax:-

<input type="password">

Example:-

<label for="pwd">Enter your password:</label>
<input type="password" id="pwd" name="pwd">

3. Definition and Usage of <input type="button">

• The <input type="button"> defines a clickable button (mostly used with Javascript to activate a script).

syntax:-

<input type="button">

Example:-

<input type="button" value="click me" onclick="msg()">

4. Definition and Usage of <input type="hidden">

• The <input type="hidden"> defines a hidden input field.

• A hidden field lets web developers include data that cannot be seen or modified by users when a form is submitted.

• A hidden field often stores what database record needs to be updated when the form is submitted.

Note:-While the value is not displayed to the user in the page's content, it is visible (and can be edited) using any browser's developer tools or "view source" functionality. Do not use hidden input as a form of security!

syntax:-

<input type="hidden">

Example:-

<input type="hidden" id="custId" name="custId" value="3487">

5. Definition and Usage of <input type="submit">

• The <input type="submit"> defines a submit button which submits all form values to a form handler.

• The form-handler is typically a server page with a script for processing the input data.

• The form-handler is specified in the form's action attribute.

syntax:-

<input type="submit">

Example:-

<input type="submit">

6. Definition and Usage of <input type="text">

• The <input type="text"> defines a single-line text field.

• The default width of the text field is 20 characters!

  Tip:- Always add the <label> tag for the best accessibility practices!

Syntax:-

<input type="text">

Example:-

<label for="fname">First name:</label>
<input type="text" id="fname" name="fname">

7. Definition and Usage of <input type="url">

• The <input type="url"> defines a field for entering a URL.

• The input value is automatically validated before the form can be submitted.

Tip:- Always add the <label> tag for the accessibility practices!

Syntax:-

<input type="url">

Example:-

<label for="homepage">Add your homepage:</label>
<input type="url" id="homepage" name="homepage">

8. Definition and Usage of <input type="search">

• The <input type="search"> defines a text field for entering a search string.

Note:- Remember to set a name for the search field, otherwise nothing will be submitted. The most common name for search inputs is q.

Syntax:-

<input type="search">

Example:-

<label for="gsearch">search Google:</label>
<input type="search" id="gsearch" name="gsearch">

9. Definition and Usage of <input type="checkbox">

• The <input type="checkbox"> defines a checkbox.

• The checkbox is shown as a square box that is ticked (checked) when activated.

• Checkbox are used to let a user select one or more options of a limited number of choices.

Tip:- Always add the <label> tag for best accessibility practices!

Syntax:-

<input type="checkbox">

Example:-

<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> I have a car</label><br>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> I have a boat</label><br>

10. Definition and Usage of <input type="file">

• The <input type="file"> defines a file-select field and a "Browse" button for file upload.

• To define a file-select field that allows multiple files to be selected, add the multiple attributes.

Tip:- Always add the <label> tag for best accessibility practices!

Syntax:-

<input type="file">

Example:-

<label for="myfile">Select a file:</label>
<input type="file" id="myfile" name="myfile">

HAPPY Learning!!!💫