Scribd
Upload
61 views

HTML5 Web Forms 2

The document discusses HTML5 web forms. It describes the <input> element and its attributes for different data types. New HTML5 input types were introduced like datetime, datetime-local, date, month, week, time and email. Examples are given to show how each input type works and the format of data it accepts. The key new features of HTML5 forms allow capturing different data types like dates, times in standardized formats.

Uploaded by

durai murugan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
61 views

HTML5 Web Forms 2

The document discusses HTML5 web forms. It describes the <input> element and its attributes for different data types. New HTML5 input types were introduced like datetime, datetime-local, date, month, week, time and email. Examples are given to show how each input type works and the format of data it accepts. The key new features of HTML5 forms allow capturing different data types like dates, times in standardized formats.

Uploaded by

durai murugan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 20

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@example.com 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

You might also like