Input Element

Input Element

The input element is used to take input from users. It displays a bordered row on the Webpage. input is a self-closing element we don't need to close its tag by ourselves.

<input>

It displays a result like this

We have some attributes in input to take specific information from users.

Type attribute in an input element

type is an attribute in an input which takes specific information we can set to type text, email, number, password, button, radio button, checkbox, etc.

 <input type="text">
    <input type="number">
    <input type="email">
    <input type="password">

if the user does not insert the value as defined then the following hint will be appear like the third input is of email it must include @.

Value attribute in the input element

If we want to display some value already present in the input element then we use the value attribute

  <input type="text" value="email">
    <input type="number" value="10">
    <input type="email" value="sam@gmail.com">
    <input type="password" value="1235">
    <input type="button" value="Submit">

It displays the result like this

Placeholder Attribute

If we want to show some text for a hint then we can use a placeholder attribute in input element. This text will disappear when the user clicks on an input field.

 <input type="text" placeholder="email">
    <input type="number" placeholder="10">
    <input type="email" placeholder="sam@gmail.com">
    <input type="password" placeholder="1235">

It displays the result like this

Auto focus and readonly attribute

If we want that whenever the page reloads cursor is in an input field we can use autofocus. readonly attribute is used when we want to display some information in an input field that we don't allow user to change it.

 <input type="text" placeholder="email" autofocus>
    <input type="number" placeholder="10" readonly>

It displays result like this

Label tag

label tag is used to display some information regarding input field.

<label>Input Email</label> 
   <input type="text" placeholder="email">

It displays the result like this

We can use for attribute in label and id attribute in input field so that when we click on text which is given in label in highlight the input field related to this.

<label for="email">Input Email</label> 
   <input type="text" placeholder="email" id="email">

It displays the same result as before but on cliking to the text 'Input Email' it will highlight the input field.