Advanced Web Designing
Advanced Web Designing
We have been introduced to basic
terminologies related to creation of web
pages. The Hypertext Mark-up Language
(HTML) is an evolving language, withdifferent versions supporting different
features. HTML5 is currently used
because it supports mobile technology.
The major browsers are Google Chrome,
MozillaFirefox, Microsoft Edge, Safari,
Opera and Apple support the features of
HTML5.
1.2 Forms in HTML5
In eleventh standard we have studied
different controls related to form like text,
radio, checkbox, submit, reset, select and
textarea.
These controls are used to collect
different kinds of user inputs, such as
contact details like name, address, single
or multiple options from group of options,
as well as clearing and submitting data
etc.
HTML5 has introduced additional
form controls which can also be used for
validation purpose. HTML5 advanced <input> elements
HTML5 introduces a number of new input types.
Input type Description
<input type="color"> Defines a color picker
<input type="number"> Defines a field for entering a number
<input type="url"> Defines a field for entering a URL.
<input type="image"> Defines an image as a submit button.
<input type="date"> Defines a date picker with the year, month and day
<input type="email"> Defines a field for an e-mail address.
Some other useful attributes used with <input> are-
1. id : This is used to identify the html element uniquely through the document object
model.
2. class: It is used to apply CSS style to the individual input element.
Examples :
<!DOCTYPE html> <html>
<head>
<title>Forms in html 5 </title></head>
<body>
<form> Name: <input type="text"autocomplete><br><br>
E-mail:<input type="email" name="email"><br><br>
Date of Inception: <input type="date" name="bday"><br><br>
Office time: <input type="time" name="usr_time"><br><br>
Number of years completed(between 1 and 100): <input type="number" min="1"
max="100"><br><br>
Office phone number: <input type="tel" name="phone" pattern="[0-9]{2}-[0-9]
{10}" required><br><br>
Add your homepage:
<input type="url" name="homepage"><br><br>
<input type="image" src="E:/submitbutton.png" alt="click here to submit" >
</form>
</body>
</html>
nice
ReplyDeleteHii
ReplyDeleteHi
ReplyDeleteDirect selling business
ReplyDeleteAbhishek
ReplyDelete