Chapter 1 :- Advance 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, with
different 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.
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 |
Input type | Description |
<input type="month"> | Defines a month and year control in format is "YYYY-MM" |
<input type="range"> | Define a range control. Default range is 0 to 100. |
<input type="datetime-local"> | Defines a date picker that includes the year, month, day and time. |
<input type="time"> | Defines a control for entering a time. |
<input type="week"> | Defines a week and year control. |
<input type="search"> | Defines a text field for entering a search string like a site search or Google search. |
<input type="file"> | Defines a file-select field and a "Browse" button for file uploads. |
<input type="tel"> | Used to define input fields that should contain a telephone number. |
Input Restrictions
A list of some common input restrictions is given below, few of which can be used for validation purpose.
Attribute | Description |
disabled | Specifies that an input field should be disabled. |
max | Specifies the maximum value for an input field. |
min | Specifies the minimum value for an input field. |
pattern | Specifies a regular expression to check the input values. |
read only | Specifies that an input field is read only (cannot be changed). |
placeholder | This acts as a temporary label showing the purpose of a text field without requiring a label tag. |
required | Specifies that an input field is required (must be filled out). |
autocomplete | Specifies whether a form or input field should have autocomplete On or Off. |
autofocus | Specifies that the input field should automatically get focus when the page loads. |
height and width | Specifies the height and width of an <input type="image"> |
multiple | Specifies that the user is allowed to enter more than one value in the <input> element. This works with input types like email and file. |