Home > Developer > Web Develop
HTML5 learning notes simplified version (6): new attributes (1), html5 learning notes
Media attributes under a and area
To maintain consistency with the link element, both the and area elements also add the media attribute, which is valid only when href exists. Media properties mean the target URL is why media/device is optimized, the default value is all, detailed syntax specifications please visit: http://dev.w3.org/csswg/css3-mediaqueries/#media0
Sample Code:
<a href="att_a_media.asp?output=print" media="print and (resolution:300dpi)">HTML5 a media attribute.</a>
Hreflang, type, and rel attributes under area
To save the consistency with element a and link, the area element adds attributes such as hreflang, type, and rel.
Attribute |
Value |
Description |
Hreflang |
Language_code |
Specifies the language of the target URL |
Media |
Media query |
Specify the target URL for media/device Optimization |
Rel |
Alternate, author, bookmark, external, help, license, next, nofollow, noreferrer, prefetch, prev, search, sidebar, tag |
Specifies the relationship between the current document and the target URL |
Type |
Mime_type |
Specify the MIME type of the target URL |
Target attribute in base
The target attribute in base is the same as the target attribute in a, which has long been supported by many earlier browsers.
NOTE 1: The target must be declared before all connected elements.
NOTE 2: If multiple statements are declared, the first statement shall prevail.
<!DOCTYPE html>
Click the connection above to go to http://www.example.com/news/archives.html.
Charset attribute under metaCharset is used to define the document's encoding method. If this property is defined in XML, the value of charset must be case-insensitive ASCII for match UTF-8, because the XML document enforces the use of UTF-8 as the encoding method.
Note: The charset attribute on the meta attribute does not work in the XML document, just to facilitate direct migration with XHTML.
You cannot declare multiple meta elements with the charset attribute.
In HTML4, We have to define this as follows:
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
In HTML5, we can define it like this:
<meta charset="ISO-8859-1">Autofocus attribute
HTML5 adds an autofocus attribute to the input, select, textarea, And button elements (hidden's input cannot be used). It provides a declarative method to define when the page is loaded, the focus is automatically applied to the current element. You can use autofocus to improve user experience. For example, you can set the focus on the logon page. After the page is loaded, the focus is automatically set to the textbox of the user name.
<input maxlength="256" name="loginName" value="" autofocus><input type="submit" value="Login">NOTE 1: The autofocus attribute is declared once on a page.
NOTE 2: autofocus is not required for a page.
Placeholder attributes
The placeholder attribute is added to the input and textarea elements to improve user input content. When a user clicks, the text of the content disappears automatically. If the focus is left and the value is blank, the content is displayed again. In the past, we used JavaScript code to implement it. In fact, it was quite complicated. With the placeholder attribute, it would be nice to directly write the following code:
<Input type = "username" placeholder = "Enter your username">Form attributes
The form attribute (not a <form> element) is an epoch attribute that allows you to declare the form Control in the <form> form outside the form, you only need to set the form attribute on the corresponding control to the id of the specified <form> form. You do not need to declare the element in the <form> element.
The Code is as follows:
<label>Email: <input type="email" form="foo" name="email"></label><form id="foo"></form>
The following elements are supported: input, output, select, textarea, button, label, object, and fieldset.
Required attributesThe required attribute is a validation property that indicates that the control is mandatory and must be filled before the submit form. Available elements are: input, select, and textarea (except: the type is hidden, image, or input element similar to submit ).
If you use the required attribute on the select statement, you must set a placeholder option with a null value. The Code is as follows:
<label>Color: <select name=color required> <option value="">Choose one <option>Red <option>Green <option>Blue</select></label>Disabled attribute under fieldset
When fieldset sets the disabled attribute, all its child controls are disabled, but do not include the elements in legend. The name attribute is used for script access.
Code 1:
<form><fieldset name="clubfields" disabled> <legend> <label> <input type=checkbox name=club onchange="form.clubfields.disabled = !checked"> Use Club Card </label> </legend> <p><label>Name on card: <input name=clubname required></label></p> <p><label>Card number: <input name=clubnum required pattern="[-0-9]+"></label></p> <p><label>Expiry date: <input name=clubexp type=month></label></p></fieldset></form>
When you click checkbox in legend, the system automatically switches the disabled status of the fieldset sub-element.
Code 2:
<form><fieldset name="clubfields"> <legend> <label> <input type="checkbox" name="club" onchange="form.clubfields.disabled = !checked"> Use Club Card </label> </legend> <p> <label> Name on card: <input name="clubname" required></label></p> <fieldset name="numfields"> <legend> <label> <input type="radio" checked name="clubtype" onchange="form.numfields.disabled = !checked"> My card has numbers on it </label> </legend> <p> <label> Card number: <input name="clubnum" required pattern="[-0-9]+"></label></p> </fieldset> <fieldset name="letfields" disabled> <legend> <label> <input type="radio" name="clubtype" onchange="form.letfields.disabled = !checked"> My card has letters on it </label> </legend> <p> <label> Card code: <input name="clublet" required pattern="[A-Za-z]+"></label></p> </fieldset></fieldset></form>
In this example, when the "Use Club Card" checkbox is not selected, all the child controls in it are disabled. if selected, both radiobutton instances are available, then you can select the child fieldset you want to make available.
New Attributes in input (autocomplete, min, max, multiple, pattern, step)Several attributes (autocomplete, min, max, multiple, pattern, and step) are added to the input file. Currently, only some browsers support the required and autocomplete attributes. Other attributes are not supported yet.
The autocomplete attribute specifies whether the Automatic completion function should be enabled for the input field to allow the browser to predict the input of the field. When you start typing a field, the browser displays the entered options in the field based on the previously typed value.
<form action="demo_form.asp" method="get" autocomplete="on"> First name:<input type="text" name="fname" /><br /> Last name: <input type="text" name="lname" /><br /> E-mail: <input type="email" name="email" autocomplete="off" /><br /> <input type="submit" /></form>
Note: The autocomplete attribute applies to <form> and the following <input> types: text, search, url, telephone, email, password, datepickers, range, and color.
You can also declare a list attribute to associate it with the datalist element that stores data.:
<form><label>Homepage: <input name=hp type=url list=hpurls></label><datalist id=hpurls> <option value="http://www.google.com/" label="Google"> <option value="http://www.reddit.com/" label="Reddit"></datalist></form>
When the input is empty, double-click it and a prompt is displayed (the option content is the defined label (Google/Reddit )). If you select a label, the corresponding value address is updated to the input (currently supported by FF ).
Datalist can be declared in multiple forms:
<Datalist id = "breeds"> <option value = "Abyssinian"> <option value = "Alpaca"> <! --... --> </Datalist> or <datalist id = "breeds"> <label> or select one from the list: <select name = "breed"> <option value = ""> (none selected) <option> Abyssinian <option> Alpaca <! --... --> </Select> </label> </datalist>
In addition, when the input type is image, the width and height attributes of input are also supported to specify the image size.
Copyright statement: This article is the original author of the http://www.zuiniusn.com, not allowed by the blogger can not be reproduced.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
