HTML Forms

• An HTML form is used to collect user input. The user input is most
often sent to a server for processing.
• The HTML <form> element is used to create an HTML form for user
input:

• <form>
• form elements
•.
• </form>
• The <form> element is a container for different types of input
elements, such as: text fields, checkboxes, radio buttons, submit
buttons, etc.

• All the different form elements are covered in this chapter: HTML
Form Elements.
The <input> Element
The HTML <input> element is the most used form
element.
An <input> element can be displayed in many ways,
depending on the type attribute.
Type Description
<input type="text"> Displays a single-line text input field
<input type="radio"> Displays a radio button (for selecting one
of many choices)
<input type="checkbox"> Displays a checkbox (for selecting zero or
more of many choices)
<input type="submit"> Displays a submit button (for submitting
the form)
<input type="button"> Displays a clickable button
• Text Fields
• The <input type="text"> defines a single-line input field for text input.
• <form>
<input type="text"><br>
<input type="text" >
</form>

• The form itself is not visible. Also note that the default width of an
input field is 20 characters.
• The <label> Element
• The <label> tag defines a label for many form elements.

• The for attribute of the <label> tag should be equal to the id attribute
of the <input> element to bind them together.

• <label >First name:</label><br>

• Radio Buttons
• The <input type="radio"> defines a radio button.

• Radio buttons let a user select ONE of a limited number of choices.

• <form>
• <input type="radio value="HTML">
• <input type="radio" value="CSS">
• <input type="radio" value="JavaScript">
• </form>
• Checkboxes
• The <input type="checkbox"> defines a checkbox.

• Checkboxes let a user select ZERO or MORE options of a limited number of

choices.

• <input type="checkbox" value="Bike">

• <input type="checkbox" value="Car">
• <input type="checkbox" value="Boat">
• The Submit Button
• The <input type="submit"> defines a button for submitting the form
data to a form-handler.

• The form-handler is typically a file on the server with a script for

processing input data.

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

• <form action”name of file">
<input type="submit" value="Submit">
</form>
• Input Type Button
• <input type="button"> defines a button:

• Example
• <input type="button" onclick="alert('Hello World!')" value="Click
Me!">
• Input Type Color
• The <input type="color"> is used for input fields that should contain a color.

• Depending on browser support, a color picker can show up in the input field.

• Example
• <form>
• <label for="favcolor">Select your favorite color:</label>
• <input type="color" id="favcolor" name="favcolor">
• </form>
• Input Type Date
• The <input type="date"> is used for input fields that should contain a date.

• Depending on browser support, a date picker can show up in the input field.

• Example
• <form>
• <label for="birthday">Birthday:</label>
• <input type="date" id="birthday" name="birthday">
• </form>
• Input Type Email
• The <input type="email"> is used for input fields that should contain an e-mail
address.

• Depending on browser support, the e-mail address can be automatically validated

when submitted.

• Some smartphones recognize the email type, and add ".com" to the keyboard to
match email input.

• Example
• <form>
• <label for="email">Enter your email:</label>
• <input type="email" id="email" name="email">
• </form>
• Input Type Password
• <input type="password"> defines a password field:

• Example
• <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">
• Input Type Image
• The <input type="image"> defines an image as a submit button.

• The path to the image is specified in the src attribute.

• Example
• <form>
• <input type="image" src="img_submit.gif" alt="Submit" width="48"
height="48">
• </form>
•<input type="button">
•<input type="checkbox">
•<input type="color">
•<input type="date">
•<input type="datetime-local">
•<input type="email">
•<input type="file">
•<input type="hidden">
•<input type="image">
•<input type="month">
•<input type="number">
•<input type="password">
•<input type="radio">
•<input type="range">
•<input type="reset">
•<input type="search">
•<input type="submit">
•<input type="tel">
•<input type="text">
•<input type="time">
•<input type="url">
•<input type="week">
• The Name Attribute for <input>
• Notice that each input field must have a name attribute to be submitted.

• If the name attribute is omitted, the value of the input field will not be
sent at all.
• <label for="fname">First name:</label><br>
<input type="text" id="fname" value="John"><br><br>
• The value Attribute
• The input value attribute specifies an initial value for an input field:
• <input type="text" id="fname" name="fname" value="John"><br>

• The readonly Attribute

• The input readonly attribute specifies that an input field is read-only.

• A read-only input field cannot be modified (however, a user can tab to it, highlight it,
and copy the text from it).

• The value of a read-only input field will be sent when submitting the form!
• The disabled Attribute
• The input disabled attribute specifies that an input field should be disabled.

• A disabled input field is unusable and un-clickable.

• The value of a disabled input field will not be sent when submitting the
form!

• Example
• A disabled input field:

<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John" disabled><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe">
</form>
• the size Attribute
• The input size attribute specifies the visible width, in characters, of an input field.

• The default value for size is 20.

• Note: The size attribute works with the following input types: text, search, tel, url,
email, and password.

• Example
• Set a width for an input field:

<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" size="50"><br>
• the maxlength Attribute
• The input maxlength attribute specifies the maximum number of
characters allowed in an input field.

• Note: When a maxlength is set, the input field will not accept more
than the specified number of characters.
• <input type="text" id="pin" name="pin" maxlength="4" size="4">
• The height and width Attributes
• The input height and width attributes specify the height and width of
an <input type="image"> element.
• <input type="image" src="img_submit.gif" alt="Submit" width="48" h
eight="48">