Input and Label in HTML Forms

Input Tag
The <input> tag specifies an input field where the user can enter data. <input>
elements are used within a <form> element to declare input controls that allow users to
input data.

NOTE : It is an inline tag.

type Attribute
HTML provides different types of input that you can use for different kinds of entries. By
default, the value of type is text, which specifies that we want single-line text input.

NOTE : type attribute is mandatory

Some more values for the type attribute are -

● submit
● email
● password
● date
● number
● range
● URL
● checkbox
● radio
● hidden
● time

Input Type Submit

type = "submit" represents a button that when selected, will submit the form. You can
control the text that appears on the submit button with the value attribute.

Example : <input type="submit" value="Submit">

Browser :

1
value Attribute
Value is not a compulsory attribute to add to the input element.
The value attribute is used differently for different input types:

● For "button", "reset", and "submit" : It defines the text on the button
● For "text", "password", and "hidden" : It defines the initial (default) value of the
input field
● For "checkbox", "radio", "image" - it defines the value associated with the input (It
is also the value that is sent on submit)

Example : To set India as the default country on the input field

<label for="residence"> Enter the country : </label><br/>

<input type="text" id="residence" value="India" />
<input type="submit" value="Submit">

Browser :

name Attribute
The HTML form data is sent to the browser or server-side in the form of (name: value),
where value is the entry you provide respective to that name parameter.
The name attribute is a compulsory attribute for input tag in a form.
Without this attribute, this form element won't be submitted or, in other words would
not be sent to the server.

The name attribute also uniquely identifies that piece of data. The value of the input is
accessed using the name attribute.

label Tag
A label tag describes the kind of input in a form, and it is not compulsory. You can do
that without the use of a label tag. But it is better to use the <label> tag to describe the
kind of input for the form element.

NOTE : This is also an inline tag.

2
 Example : <label for="fname">First name:</label><br/>
<input type="text" id="fname" name="firstname" />

❖ The label is tied to this input element by giving the "id" attribute of the input
element the same value as the label's "for" attribute.

NOTE : The value of id and name can be the same, and most of the time, this will be the
case.

required Attribute
It specifies that an input field must be filled out before submitting the form. Else, it
shows a pop up to fill out the required field, or you can say it defines a mandatory
field.
The required attribute is a boolean attribute.

Example : <form>
<input type="text" required>
<input type="submit" value="Submit" />
</form>

If we click submit without entering any value, this pop-up shows up.

placeholder Attribute
The placeholder attribute is used with the input element. It describes a sample value or
a short description of the expected format.
The value of the placeholder attribute specifies a short hint that describes the expected
value of an input field.

Example : <input type="text" name="fname" placeholder="First name">

3
 Browser :

Input Type password

It is used for entering passwords in an input field. It is not shown on the screen, i.e. The
characters in a password field are masked (shown as asterisks or circles).

Example : <form>
<label for="username">Username:</label><br>
<input type="text" id="username" name="username"><br>
<label for="pwd">Password:</label><br>
<input type="password" id="pwd" name="pwd">
</form>

Browser :

Input Type Date

It is used for input fields that should contain a date.

Example : <form>
<label for="dob">Enter DOB : </label>
<input type="date" id="dob" name="dob">
</form>

Browser :

Input type range

It defines a control for entering a number on a slider control. Default range is 0 to 100.
However, you can set restrictions on the accepted numbers with the min, max, and step
attributes.

4
 Example : <form>
<label for="val"> Value </label>
<input type="range" id="val" name="val" min="0" max="50">
</form>

Browser :

Input type checkbox

Checkboxes are used when more than one option may need to be checked, or you can
also use them to enable or disable something.

There is also an attribute named checked, that when present, makes the checkbox
selected by default when the page loads.

Example :
<form>
<input type="checkbox" name="color1" value="red"> Red <br>
<input type="checkbox" name="color2" value="green"> Green <br>
<input type="checkbox" name="color3" value="white" checked> White
</form>

Browser :

Input type radio

The radio button is just like a checkbox, but the difference is that the values of the name
attribute are all the same.
The name attributes are all set to the same value makes these radio buttons part of the
same set, and therefore, you can only select one of them at once.

Example :
<form >
<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other
</form>

5
 Browser :

Input type hidden

It defines a hidden input field (not visible to a user).
The hidden field includes some data and submits it along with the form, which is not
visible to the user.

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

Example : <form>
<label for="Name">Name:</label>
<input type="text" id="Nname" name="Nname"><br><br>
<input type="hidden" id="loc" name="loc" value="India">
<input type="submit" value="Submit">
</form>

Browser :