Using Label Tags in HTML Forms
Uploaded by
Linda BrownUsing Label Tags in HTML Forms
Uploaded by
Linda BrownLabel Tag in Form
It is considered better to have label in form. As it makes the code parser/browser/user
friendly.
If you click on the label tag, it will focus on the text control. To do so, you need to have
for attribute in label tag that must be same as id attribute of input tag.
NOTE: It is good to use <label> tag with form, although it is optional but if you will use it,
then it will provide a focus when you tap or click on label tag. It is more worthy with
touchscreens.
<form>
<label for="firstname">First Name: </label> <br/>
<input type="text" id="firstname" name="firstname"/> <br/>
<label for="lastname">Last Name: </label>
<input type="text" id="lastname" name="lastname"/> <br/>
</form>
HTML 5 Email Field Control
The email field in new in HTML 5. It validates the text for correct email address. You
must use @ and . in this field.
<form>
<label for="email">Email: </label>
<input type="email" id="email" name="email"/> <br/>
</form>
HTML <fieldset> element:
The <fieldset> element in HTML is used to group the related information of a form. This
element is used with <legend> element which provide caption for the grouped
elements.
Example:
<form>
<fieldset>
<legend>User Information:</legend>
<label for="name">Enter name</label><br>
<input type="text" id="name" name="name"><br>
<label for="pass">Enter Password</label><br>
<input type="Password" id="pass" name="pass"><br>
<input type="submit" value="submit">
</fieldset>
</form>
HTML Form Input Types
In HTML <input type=" "> is an important element of HTML form. The "type" attribute
of input element can be various types, which defines information field. Such as <input
type="text" name="name"> gives a text box.
Following is a list of all types of <input> element of HTML.
type=" " Description
color Defines an input field with a specific color.
date Defines an input field for selection of date.
datetime Defines an input field for entering a date without time zone.
-local
email Defines an input field for entering an email address.
month Defines a control with month and year, without time zone.
number Defines an input field to enter a number.
url Defines a field for entering URL
week Defines a field to enter the date with week-year, without time zone.
search Defines a single line text field for entering a search string.
tel Defines an input field for entering the telephone number.
<input type="image">:
The <input> type "image" is used to represent a submit button in the form of image.
Example:
<!DOCTYPE html>
<html>
<body>
<h2>Input "image" type.</h2>
<p>We can create an image as submit button</p>
<form>
<label>User id:</label><br>
<input type="text" name="name"><br><br>
<input type="image" alt="Submit" src="[Link]" width="100px">
</form>
</body>
</html>
HTML5 added new types on <input> element. Following is the list of types of
elements of HTML5
type=" " Description
color Defines an input field with a specific color.
date Defines an input field for selection of date.
datetime-local Defines an input field for entering a date without time zone.
email Defines an input field for entering an email address.
month Defines a control with month and year, without time zone.
number Defines an input field to enter a number.
url Defines a field for entering URL
week Defines a field to enter the date with week-year, without time zone.
search Defines a single line text field for entering a search string.
tel Defines an input field for entering the telephone number.
HTML <input> element attribute
HTML name attribute
The HTML name attribute defines the name of an input element. The name and value
attribute are included in HTTP request when we submit the form.
Note: One should not omit the name attribute as when we submit the form the HTTP
request includes both name-value pair and if name is not available it will not process
that input field.
Example:
<form action = "[Link]" method = "get">
Enter name:<br><input type="name" name="uname"><br>
Enter age:<br><input type="number" name="age"><br>
Enter email:<br><input type="email"><br>
<input type="submit" value="Submit">
</form>
HTML value attribute
The HTML value attribute defines the initial value or default value of an input field.
Example:
<form>
<label>Enter your Name</label><br>
<input type="text" name="uname" value="Enter Name"><br><br>
<label>Enter your Email-address</label><br>
<input type="text" name="uname" value="Enter email"><br><br>
<label>Enter your password</label><br>
<input type="password" name="pass" value=""><br><br>
<input type="submit" value="login">
</form>
HTML required attribute HTML5
HTML required is a Boolean attribute which specifies that user must fill that filed before
submitting the form.
Example:
<form>
<label>Enter your Email-address</label><br>
<input type="text" name="uname" required><br><br>
<label>Enter your password</label><br>
<input type="password" name="pass"><br><br>
<input type="submit" value="login">
</form>
HTML placeholder attribute HTML5
The placeholder attribute specifies a text within an input field which informs the user
about the expected input of that filed.
The placeholder attribute can be used with text, password, email, and URL values.
When the user enters the value, the placeholder will be automatically removed.
Example:
<form>
<label>Enter your name</label><br>
<input type="text" name="uname" placeholder="Your name"><br><br>
<label>Enter your Email address</label><br>
<input type="email" name="email" placeholder="example@[Link]"><br><br
>
<label>Enter your password</label><br>
<input type="password" name="pass" placeholder="your password"><br><br>
<input type="submit" value="login">
</form>
HTML autofocus attribute HTML5
The autofocus is a Boolean attribute which enables a field automatically focused when a
webpage loads.
Example:
<form>
<label>Enter your Email-address</label><br>
<input type="text" name="uname" autofocus><br><br>
<label>Enter your password</label><br>
<input type="password" name="pass"><br><br>
<input type="submit" value="login">
</form>
HTML disabled attribute
The HTML disabled attribute when applied then it disable that input field. The disabled
field does not allow the user to interact with that field.
The disabled input filed does not receive click events, and these input value will not be
sent to the server when submitting the form.
Example:
<input type="text" name="uname" disabled><br><br>
HTML size attribute
The size attribute controls the size of the input field in typed characters.
Example:
<label>Account holder name</label><br>
<input type="text" name="uname" size="40" required><br><br>
<label>Account number</label><br>
<input type="text" name="an" size="30" required><br><br>
<label>CVV</label><br>
<input type="text" name="cvv" size="1" required><br><br>
