HTML5 base (b)

Copyright: Attribution, allow others to create paper-based, and must distribute paper (based on the original license agreement with the same license Creative Commons )

three. HTML5 new common attributes:

1.contenteditable property

You can be edited, if the property is set to true, then you can edit the HTML elements in the content directly in the browser. contenteditable attribute has "inheritable" sex, if a parent element HTML elements are "editable" sex, then it is also editable by default, unless it is specified contenteditable = "false"

2.hidden property

Whether to hide, if the property is set to true, then the component will be hidden

3.spellcheck property

Tips for checking whether the text entered by the user, the default value is false. Some browsers support

four. Form controls

(A) Using the input element

    <Input> element is a form control elements of the most versatile.

1. text: <input> element generating line text box.
2. password: <input> element generated password input box.
3. hidden: <input> hidden field generating element.
4. radio: <input> element generating unit box.
5. CheckBox: <input> element generated box.
6. Image: <input> element generates image domain.
7. File: <input> elements to generate text upload fields.
8. submit, reset, button: Specify <input> submitted generating element, reset, no action button.
9. Color: <input> element generates color selector.
10. Date: <input> element generates date picker.
11. Time: <input> element selector generation time.
12. Datetime: <input> element generates the UTC date and time selector.
13. Datetime-local: <input> element generates a local date, time picker.
14. Week: <input> element generated for user selection of a text box weeks.
15. Month: <input> element generates a month selector.
16. Email: <input> element generates an e-mail format, the browser will automatically check the value of the text box, if e-mail does not meet, will not be allowed to submit the form, and when you mouse over the text box in the browser It will automatically generate tips as:

  17.url: <input> element to generate a url input box, the browser will automatically check the value of the text box, if you do not meet the url format, will not be allowed to submit the form, and when you mouse over the text box in the browser It will automatically generate tips as:

  18.number: <input> element can only generate a digital input text box.

  19.range: <input> element generates a drag bar, a text box may also specify the following three properties:

• Specified minimum drag bar: min
• Specify the maximum drag the article: max
• step: Specifies the drag strip of step

(B) Using the definition of tag label

              <Label> element is used to form elements defined label, his biggest feature is that you can specify for a property that you can specify the label associated with which form controls. That is, when the user clicks <label> element generated by a label associated with the control elements will form the focus.

There are two ways to make the tag associated with the form controls:

1. Implicit Use for attribute: Specifies <label> element for the property value of the id attribute value associated with the form controls.
2. Explicit association of: in the <label> element with plain text form controls.

The following code:

<form method="get">

      <label for="usercode">账号：</label>

      <input type="text" name="usercode" id="usercode"/>

      <label>密码：<input type="password" name="password" id="password"/></label>

</form>

(C) Use the button Custom Buttons

<Button> element defines a button may comprise plain text, text formatting tags, content.

• Disabled: Specifies whether to disable the button, the property value can only be disabled, or omitted attribute values.
• Name: unique name of the button.
• Type: Specifies the type of the button, the attribute value only button, reset, submit.
• Value: Specifies the initial value of the button, you can be modified by the script.

(D) The list boxes and drop-down menus

<Select> element is used to create a list box or drop-down menu, and the element must use <option> elements combine, each <option> element represents a list item or menu item.

1. Disabled: Set and disable the pull-down menu list box, only the value of the property attribute value is disabled or omitted.
2. Multiple: Set the list boxes and drop-down menu whether to allow multiple choice, but set to allow multiple selections, <select> elements are automatically generated list box.
3. Size: Specifies the list box how many list items are displayed at the same time.
4. Selected: specify whether the list item selected initial state is not the value of the property can only be selected.
5. Value: Specifies the request parameter value corresponding to that option.

<Select> can comprise two sub-elements as follows:

1. <Option>: used to define a list of options or menu items.
2. <Optgroup>: used to define the list item or menu item group. This element can contain <option> child element.

Note: Hold down the Ctrl button to select multiple options

For example the following code:

 

下拉菜单

    <select id="sel1" name="sel1">

        <option value="java">java语言</option>

        <option value="c#">c#语言</option>

        <option value="ruby">ruby语言</option>

    </select><br /><br /><br />

    列表框

    <select id="books" name="books" multiple="multiple">

        <option value="java1">java语言</option>

        <option value="c#1">c#语言</option>

        <option value="ruby1">ruby语言</option>

    </select><br /><br /><br />

    列表框

    <select id="Lee" name="Lee" multiple="multiple" size="4">

        <optgroup label="体系图书">

            <option value="java2">java进阶</option>

            <option value="c#2">c#进阶</option>

            <option value="ruby2">ruby进阶</option>

        </optgroup>

    </select>

Renderings:

(E) Use textarea defined text fields

<Textarea> element for generating a multiline text field, <textarea> element may specify id, style, class and other properties of the core, and the like may also specify the onclick event attributes. It can accept user input, the user can select text in a text field, it can also specify onselect, onchange two attributes, in response to a text field content is selected, the text event is modified. You can also specify the following several attributes:

• cols: Specifies the width of the text field (bytes is a single line), is required.
• rows: Specifies the height of the text fields (the value of the number of visible lines), is required.
• disabled: Disable the development of the text field, property values ​​can only be disabled, disable the text field when the text field is first loaded.
• readonly: Specifies the text field read-only, the attribute value can only be readonly.

<form>

       简单多行文本域：<br/>

       <textarea cols="20" rows="2"></textarea><br/>

       只读的多行文本域：<br/>

       <textarea cols="28" rows="4" readonly="readonly">

春风十里不如你。

看山是山，看水是水，看你是全世界！

       </textarea>

   </form>