HTML5 − Web Forms 2.
By
A.DURAIMURUGAN AP/CSE
Web Forms - A.DURAIMURUGAN AP/CSE
THE <INPUT> ELEMENT IN HTML4
• HTML4 input elements use the type attribute to specify the data type.HTML4
provides following types
Type Description
Text A free-form text field, nominally free of line breaks.
Password free-form text field for sensitive information, nominally free of line
breaks
Checkbox A set of zero or more values from a predefined list.
Radio An enumerated value.
Submit A free form of button initiates form submission.
File An arbitrary file with a MIME type and optionally a file name.
Image A coordinate, relative to a particular image's size, with the extra semantic
that it must be the last value selected and initiates form submission.
Web Forms - A.DURAIMURUGAN AP/CSE
THE <FO RM> ELEMEN T
• The HTML <form> element is used to create an HTML form for user
input:
• <form>
.
form elements
.
</form>
Web Forms - A.DURAIMURUGAN AP/CSE
THE <INPUT> ELEMENT
• The <input> Element
• The <input> element is the most important form element.
• An <input> element can be displayed in many ways, depending on
the type attribute.
• Here are some examples:
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="submit"> Displays a submit button (for submitting the form)
Web Forms - A.DURAIMURUGAN AP/CSE
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>
Web Forms - A.DURAIMURUGAN AP/CSE
• Following is the simple example of using labels, radio buttons, and
submit buttons.
Example :-
• <form action="http://example.com/cgiscript.pl" method="post">
• <p>
• <label for="firstname">first name: </label>
• <input type="text" id="firstname"><br />
• <label for="lastname">last name: </label>
• <input type="text" id="lastname"><br />
• <label for="email">email: </label>
• <input type="text" id="email"><br>
• <input type="radio" name="sex" value="male"> Male<br>
• <input type="radio" name="sex" value="female"> Female<br>
• <input type="submit" value="send"> <input type="reset">
• </p>
• </form>
Web Forms - A.DURAIMURUGAN AP/CSE
THE <INPUT> ELEMENT IN HTML5
• Apart from the above-mentioned attributes, HTML5 input elements
introduced several new values for the type attribute. These are listed below.
Type Description
Datetime A date and time (year, month, day, hour, minute, second, fractions of a
second) encoded according to ISO 8601 with the time zone set to UTC.
Datetimelocal A date and time (year, month, day, hour, minute, second, fractions of
asecond) encoded according to ISO 8601, with no time zone information.
Date A date (year, month, day) encoded according to ISO 8601.
Month A date consisting of a year and a month encoded according to ISO 8601.
Week A date consisting of a year and a week number encoded according to ISO
8601.
Time A time (hour, minute, seconds, fractional seconds) encoded according to
ISO 8601.
Email It accepts only email value. This type is used for input fields that should
contain an e-mail address. If you try to submit a simple text, it forces to
enter only email address in [email protected] format.
Web Forms - A.DURAIMURUGAN AP/CSE
HTML5 - DATETIME
• A date and time (year, month, day, hour, minute, second, fractions of a
second) encoded according to ISO 8601 with the time zone set to UTC.
Example :-
• <!DOCTYPE HTML>
• <html>
• <body>
• <form action = "/cgi-bin/html5.cgi" method = "get">
• Date and Time : <input type = "datetime" name = "newinput" />
• <input type = "submit" value = "submit" />
• </form>
• </body>
• </html>
Web Forms - A.DURAIMURUGAN AP/CSE
Output
Web Forms - A.DURAIMURUGAN AP/CSE
HTML5 - DATETIME LOCAL
• A date and time (year, month, day, hour, minute, second, fractions of a second)
encoded according to ISO 8601, with no time zone information.
Example
• <!DOCTYPE HTML>
• <html>
• <body>
• <form action = "/cgi-bin/html5.cgi" method = "get">
• Local Date and Time : <input type = "datetime-local" name = "newinput" />
• <input type = "submit" value = "submit" />
• </form>
• </body>
• </html>
Web Forms - A.DURAIMURUGAN AP/CSE
Output
Web Forms - A.DURAIMURUGAN AP/CSE
HTML5 – DATE
• A date (year, month, day) encoded according to ISO 8601.
Example
• <!DOCTYPE HTML>
• <html>
• <body>
• <form action = "/cgi-bin/html5.cgi" method = "get">
• Date : <input type = "date" name = "newinput" />
• <input type = "submit" value = "submit" />
• </form>
• </body>
• </html>
Web Forms - A.DURAIMURUGAN AP/CSE
Output
Web Forms - A.DURAIMURUGAN AP/CSE
HTML5 – MONTH
• A date consisting of a year and a month encoded according to ISO 8601.
Example :-
• <!DOCTYPE HTML>
• <html>
• <body>
• <form action = "/cgi-bin/html5.cgi" method = "get">
• Month : <input type = "month" name = "newinput" />
• <input type = "submit" value = "submit" />
• </form>
• </body>
• </html>
Web Forms - A.DURAIMURUGAN AP/CSE
Output
Web Forms - A.DURAIMURUGAN AP/CSE
HTML5 - WEEK
• A date consisting of a year and a week number encoded according to ISO
8601.
Example :-
• <!DOCTYPE HTML>
• <html>
• <body>
• <form action = "/cgi-bin/html5.cgi" method = "get">
• Week : <input type = "week" name = "newinput" />
• <input type = "submit" value = "submit" />
• </form>
• </body>
• </html>
Web Forms - A.DURAIMURUGAN AP/CSE
Output
Web Forms - A.DURAIMURUGAN AP/CSE
HTML5 – TIME
• A time (hour, minute, seconds, fractional seconds) encoded according to
ISO 8601.
Example :-
• <!DOCTYPE HTML>
• <html>
• <body>
• <form action = "/cgi-bin/html5.cgi" method = "get">
• Time : <input type = "time" name = "newinput" />
• <input type = "submit" value = "submit" />
• </form>
• </body>
• </html>
Web Forms - A.DURAIMURUGAN AP/CSE
Output
Web Forms - A.DURAIMURUGAN AP/CSE
Thank you students for the
Cooperation
Web Forms - A.DURAIMURUGAN AP/CSE
