web programming lecture 2
web programming lecture 2
HTML Forms
An HTML form is used to collect user input. The user input can then be
sent to a server for processing.
Example
First name:
John
Last name:
Doe
Submit
enctype Specifies how the form-data should be encoded when submitting it to the server
(only for method="post")
novalidate Specifies that the form should not be validated when submitted
rel Specifies the relationship between a linked resource and the current document
target Specifies where to display the response that is received after submitting the form
Lecture on HTML Forms
Prepared By Dr. Tushar Kanti Saha
Type Description
Text Fields
<input type="text"> defines a single-line input field for text input.
Example
A form with two text input fields:
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname">
</form>
First name:
Last name:
Lecture on HTML Forms
Prepared By Dr. Tushar Kanti Saha
Radio Buttons
<input type="radio"> defines a radio button.
Example
A form with radio buttons:
<form>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label><br>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label><br>
<input type="radio" id="other" name="gender" value="other">
<label for="other">Other</label>
</form>
Male
Female
Other
Example
A form with a submit button:
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>
Lecture on HTML Forms
Prepared By Dr. Tushar Kanti Saha
This is how the HTML code above will be displayed in a browser:
First name:
John
Last name:
Doe
Submit
If the action attribute is omitted, the action is set to the current page.
The default value is "_self" which means the form will be submitted in the
current window.
To make the form result open in a new browser tab, use the value "_blank".
Example
Here, the submitted result will open in a new browser tab:
<form action="/action_page.php" target="_blank">
Other legal values are "_parent", "_top", or a name representing the name of
an iframe.
Lecture on HTML Forms
Prepared By Dr. Tushar Kanti Saha
Example
Use the GET method when submitting the form:
<form action="/action_page.php" method="get">
or:
Example
Use the POST method when submitting the form:
However, when GET is used, the form data will be visible in the page's
address field:
/action_page.php?firstname=John&lastname=Doe
Notes on GET:
Notes on POST:
POST has no size limitations, and can be used to send large amounts
of data.
Form submissions with POST cannot be bookmarked
Lecture on HTML Forms
Prepared By Dr. Tushar Kanti Saha
If the name attribute is omitted, the data of that input field will not be sent at
all.
Example
This example will not submit the value of the "First name" input field:
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" value="John"><br><br>
<input type="submit" value="Submit">
</form>
Example
A form with a submit button:
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>
First name:
John
Last name:
Doe
Submit
Note: If the type attribute is omitted, the input field gets the default type:
"text".
All the different input types are covered in the next chapter: HTML Input
Types.
Example
<label for="cars">Choose a car:</label>
<select id="cars" name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
Example
<option value="fiat" selected>Fiat</option>
Visible Values:
Use the size attribute to specify the number of visible values:
Example
<label for="cars">Choose a car:</label>
<select id="cars" name="cars" size="3">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
Example
<label for="cars">Choose a car:</label>
<select id="cars" name="cars" size="4" multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
Example
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>
The rows attribute specifies the visible number of lines in a text area.
The cols attribute specifies the visible width of a text area.
This is how the HTML code above will be displayed in a browser:
You can also define the size of the text area by using CSS:
Example
<textarea name="message" style="width:200px; height:600px;">
The cat was playing in the garden.
</textarea>
Example
<button type="button" onclick="alert('Hello World!')">Click
Me!</button>
Note: Always specify the type attribute for the button element. Different
browsers may use different default types for the button element.
Example
<form action="/action_page.php">
<fieldset>
<legend>Personalia:</legend>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</fieldset>
</form>
Personalia:First name:
John
Last name:
Doe
Submit
Example
<form action="/action_page.php">
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>
Example
Perform a calculation and show the result in an <output> element:
<form action="/action_page.php" oninput="x.value=parseInt(a.value)+pars
eInt(b.value)">
0
<input type="range" id="a" name="a" value="50">
100 +
<input type="number" id="b" name="b" value="50">
=
<output name="x" for="a b"></output>
<br><br>
<input type="submit">
</form>
Lecture on HTML Forms
Prepared By Dr. Tushar Kanti Saha
<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">
Example
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname">
</form>
First name:
Last name:
Lecture on HTML Forms
Prepared By Dr. Tushar Kanti Saha
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>
Username:
Password:
The form-handler is typically a server page with a script for processing input
data.
Example
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>
Last name:
Doe
Submit
If you omit the submit button's value attribute, the button will get a default
text:
Example
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit">
</form>
Example
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
<input type="reset">
</form>
First name:
John
Last name:
Doe
Lecture on HTML Forms
Prepared By Dr. Tushar Kanti Saha
Submit Reset
If you change the input values and then click the "Reset" button, the form-
data will be reset to the default values.
Radio buttons let a user select ONLY ONE of a limited number of choices:
Example
<form>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label><br>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label><br>
<input type="radio" id="other" name="gender" value="other">
<label for="other">Other</label>
</form>
Male
Female
Other
Example
<form>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
Lecture on HTML Forms
Prepared By Dr. Tushar Kanti Saha
<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>
</form>
I have a bike
I have a car
I have a boat
Example
<input type="button" onclick="alert('Hello World!')" value="Click Me!">
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>
Example
<form>
<label for="birthday">Birthday:</label>
<input type="date" id="birthday" name="birthday">
</form>
You can also use the min and max attributes to add restrictions to dates:
Example
<form>
<label for="datemax">Enter a date before 1980-01-01:</label>
<input type="date" id="datemax" name="datemax" max="1979-12-
31"><br><br>
<label for="datemin">Enter a date after 2000-01-01:</label>
<input type="date" id="datemin" name="datemin" min="2000-01-02">
</form>
Example
<form>
<label for="birthdaytime">Birthday (date and time):</label>
<input type="datetime-local" id="birthdaytime" name="birthdaytime">
</form>
Example
<form>
<label for="email">Enter your email:</label>
<input type="email" id="email" name="email">
</form>
Example
<form>
<label for="myfile">Select a file:</label>
<input type="file" id="myfile" name="myfile">
</form>
Example
<form>
<label for="bdaymonth">Birthday (month and year):</label>
<input type="month" id="bdaymonth" name="bdaymonth">
</form>
Example
<form>
<label for="quantity">Quantity (between 1 and 5):</label>
<input type="number" id="quantity" name="quantity" min="1" max="5">
</form>
Lecture on HTML Forms
Prepared By Dr. Tushar Kanti Saha
Input Restrictions
Here is a list of some common input restrictions:
Attribute Description
You will learn more about input restrictions in the next chapter.
The following example displays a numeric input field, where you can enter a
value from 0 to 100, in steps of 10. The default value is 30:
Example
<form>
<label for="quantity">Quantity:</label>
<input type="number" id="quantity" name="quantity" min="0" max="100"
step="10" value="30">
</form>
Lecture on HTML Forms
Prepared By Dr. Tushar Kanti Saha
Example
<form>
<label for="vol">Volume (between 0 and 50):</label>
<input type="range" id="vol" name="vol" min="0" max="50">
</form>
Example
<form>
<label for="gsearch">Search Google:</label>
<input type="search" id="gsearch" name="gsearch">
</form>
Example
<form>
<label for="phone">Enter your phone number:</label>
<input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{2}-
[0-9]{3}">
</form>
Depending on browser support, a time picker can show up in the input field.
Lecture on HTML Forms
Prepared By Dr. Tushar Kanti Saha
Example
<form>
<label for="appt">Select a time:</label>
<input type="time" id="appt" name="appt">
</form>
Example
<form>
<label for="homepage">Add your homepage:</label>
<input type="url" id="homepage" name="homepage">
</form>
Example
<form>
<label for="week">Select a week:</label>
<input type="week" id="week" name="week">
</form>
Lecture on HTML Forms
Prepared By Dr. Tushar Kanti Saha
1. form Attribute
The input form attribute specifies the form the <input> element belongs to.
The value of this attribute must be equal to the id attribute of the <form>
element it belongs to.
Example
An input field located outside of the HTML form (but still a part of the form):
<form action="/action_page.php" id="form1">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<input type="submit" value="Submit">
</form>
2. formaction Attribute
The input formaction attribute specifies the URL of the file that will process the
input when the form is submitted.
Note: This attribute overrides the action attribute of the <form> element.
The formaction attribute works with the following input types: submit and
image.
Example
An HTML form with two submit buttons, with different actions:
<form action="/action_page.php">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<input type="submit" value="Submit">
<input type="submit" formaction="/action_page2.php" value="Submit as
Admin">
</form>
Lecture on HTML Forms
Prepared By Dr. Tushar Kanti Saha
3. formenctype Attribute
The input formenctype attribute specifies how the form-data should be encoded
when submitted (only for forms with method="post").
Note: This attribute overrides the enctype attribute of the <form> element.
The formenctype attribute works with the following input types: submit and
image.
Example
A form with two submit buttons. The first sends the form-data with default
encoding, the second sends the form-data encoded as "multipart/form-data":
<form action="/action_page_binary.asp" method="post">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<input type="submit" value="Submit">
<input type="submit" formenctype="multipart/form-data"
value="Submit as Multipart/form-data">
</form>
4. formmethod Attribute
The input formmethod attribute defines the HTTP method for sending form-
data to the action URL.
The formmethod attribute works with the following input types: submit and
image.
The form-data can be sent as URL variables (method="get") or as an
HTTP post transaction (method="post").
Note: This attribute overrides the method attribute of the <form> element.
Example
A form with two submit buttons. The first sends the form-data with
method="get". The second sends the form-data with method="post":
<form action="/action_page.php" method="get">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<input type="submit" value="Submit using GET">
<input type="submit" formmethod="post" value="Submit using POST">
</form>
4. formtarget Attribute
The input formtarget a attribute specifies a name or a keyword that indicates
where to display the response that is received after submitting the form.
Note: This attribute overrides the target attribute of the <form> element.
The formtarget attribute works with the following input types: submit and
image.
Example
A form with two submit buttons, with different target windows:
<form action="/action_page.php">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<input type="submit" value="Submit">
<input type="submit" formtarget="_blank" value="Submit to a new
window/tab">
</form>
Lecture on HTML Forms
Prepared By Dr. Tushar Kanti Saha
5. formnovalidate Attribute
The input formnovalidate attribute specifies that an <input> element should
not be validated when submitted.
Note: This attribute overrides the novalidate attribute of the <form> element.
The formnovalidate attribute works with the following input types: submit.
Example
A form with two submit buttons (with and without validation):
<form action="/action_page.php">
<label for="email">Enter your email:</label>
<input type="email" id="email" name="email"><br><br>
<input type="submit" value="Submit">
<input type="submit" formnovalidate="formnovalidate"
value="Submit without validation">
</form>
6. novalidate Attribute
1. The novalidate attribute is a <form> attribute.
2. When present, novalidate specifies that all of the form-data should not be
validated when submitted.
Example
Specify that no form-data should be validated on submit:
<form action="/action_page.php" novalidate>
<label for="email">Enter your email:</label>
<input type="email" id="email" name="email"><br><br>
<input type="submit" value="Submit">
</form>