三．HTML5新增通用属性：

1.contenteditable属性

是否可编辑，如果将属性设为true，那么就可以直接在浏览器上编辑该HTML元素里的内容。contenteditable属性具有“可继承”性，如果一个HTML元素的父元素是“可编辑”性，那么它默认也是可编辑的，除非它指定contenteditable=“false”

2.hidden属性

是否隐藏，如果将属性设为true，那么该组件将被隐藏

3.spellcheck属性

是否对用户输入的文本内容执行检查提示，默认值为false。部分浏览器支持

四．表单控件

（一）.使用input元素

<input>元素是表单控件元素中功能最多的。

text：<input>元素生成单行文本框。
password：<input>元素生成密码输入框。
hidden：<input>元素生成隐藏域。
radio：<input>元素生成单选框。
CheckBox：<input>元素生成复选框。
Image：<input>元素生成图像域。
File：<input>元素生成文本上传域。
submit、reset、button：指定<input>元素生成提交、重设、无动作按钮。
Color：<input>元素生成颜色选择器。
Date：<input>元素生成日期选择器。
Time：<input>元素生成时间选择器。
Datetime：<input>元素生成UTC日期、时间选择器。
Datetime-local：<input>元素生成一个本地日期、时间选择器。
Week：<input>元素生成一个供用户选择第几周的文本框。
Month：<input>元素生成一个月份选择器。
Email：<input>元素生成一个e-mail格式，浏览器会自动检查该文本框的value，如果不符合e-mail，将不会被允许提交表单的，并当你鼠标在文本框上方浏览器会自动生成提示，如图：

17.url：<input>元素生成一个url输入框，浏览器会自动检查该文本框的value，如果不符合url格式，将不会被允许提交表单的，并当你鼠标在文本框上方浏览器会自动生成提示，如图：

18.number：<input>元素生成一个只能输入数字的文本框。

19.range：<input>元素生成一个拖动条，该文本框还可以指定如下三个属性：

min：指定拖动条的最小值
max：指定托动条的最大值
step：指定拖动条的步长

（二）.使用label定义标签

< label >元素用于表单元素中定义标签，他最大的特点就是可以指定一个for属性，该属性可以指定该标签与哪个表单控件关联。也就是说，当用户点击< label >元素所生成的标签时，该标签关联的表当控件元素就会获得焦点。

有两种方式可以让该标签与表单控件关联：

隐式使用for属性：指定< label >元素的for属性值为所关联表单控件的id属性值。
显式关联：将普通文本，表单控件一起放在<label>元素内。

如下代码：

<form method="get">

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

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

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

</form>

（三）.使用button定义按钮

<button>元素用于定义按钮，可以包含普通文本、文本格式化标签、内容。

Disabled：指定是否禁用此按钮，属性值只能为disabled，或者省略属性值。
Name:指定该按钮的唯一名称。
Type：指定该按钮的类型，属性值只能是button、reset、submit。
Value：指定该按钮的初始值，可以通过脚本进行修改。

（四）.列表框和下拉菜单

<select>元素用于创建列表框或下拉菜单，该元素必须和<option>元素结合使用，每一个<option>元素代表一个列表项或菜单项。

Disabled：设置禁用该列表框和下拉菜单，该属性的值只能是disabled或省略属性值。
Multiple：设置该列表框和下拉菜单是否允许多选，但是设置了允许多选，<select>元素会自动生成列表框。
Size：指定列表框可同时显示多少个列表项。
Selected：指定该列表项初始状态是否处于别选中状态，该属性的值只能是selected。
Value：指定该选项对应的请求参数值。

<select>只能包含如下两种子元素：

<option>：用于定义列表选项或菜单项。
<optgroup>：用于定义列表项或菜单项组。该元素只能包含<option>子元素。

注意：按住 Ctrl 按钮来选择多个选项

例如如下代码：

下拉菜单

    <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>

效果图：

（五）.使用textarea定义文本域

<textarea>元素用于生成多行文本域，<textarea>元素可以指定id、style、class等核心属性，还可以指定onclick等事件属性。它可以接受用户输入，用户可以选中文本域中的文本，所以还可以指定onselect、onchange两个属性，分别用于响应文本域内容被选中、文本被修改事件。还可以指定下面几个属性：

cols：指定文本域的宽度（值为单行字节数），必填。
rows：指定文本域的高度（值为可见行数），必填。
disabled：制定禁用该文本域，属性值只能是disabled，当此文本域首次加载时禁用此文本域。
readonly：指定该文本域只读，该属性值只能是readonly。

<form>

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

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

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

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

春风十里不如你。

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

       </textarea>

   </form>

HTML5基础（二）