HTML5（3）

HTML5结构元素

一、常见的一般页面布局分析：

页面头部、页面主体、页面底部

二、HTML5的结构元素的代码实现

页面头部：header

页面主体：section

页面底部：footer

表单应用/语法/属性

一、表单

1.表单定义（以开发的角度）：多个输入框及按钮等元素以表格形式展示

2.表单的应用场景：最常见的是网站页面中的登录或是注册功能

3.表单的代码结构：

<form>

     <table border="1px" solid black">

            <tr>  <td colspan="2">xx</td>  </tr>

            <tr>  <td>xx</td><td><input type="text"/></td>  </tr>

            <tr>  <td>xx</td><td><input type="password"/></td>  </tr>

            <tr>  <td colspan="2"> 

                     <input type="submit" value="xx"/><input type="reset" value="xx"/>  </td>  </tr>

     </table>

4.表单的展现形式

5.表单元素属性

<imput type="text" name=""  value=""/>

type:指定当前元素的类型

value：所见即所得，默认初始化可看到的

name：提交到后端服务器的值的key  

6.文本框

<input type="text"  value="123"/>

特点：

（1）用户输入的值在页面中明文显示

（2）value=""     默认的值

7.密码框

<input type="password"/>

特点：type="password" 用户输入的值在页面中暗文显示

8.单选框

<input type="radio"  name""  value=""/>

特点：

（1）type="radio"代表是单选按钮

（2）name="xx"代表两个单选按钮如果保持一致的话，代表是单选，否则是多选

（3）value="xx"代表发送到后端服务器中的值，而不是展示

（4）checked代表初始化页面的时候默认勾选某个单选框，等价于checked=checked

9.复选框

<input type="checkbox"  name=""  value=""  checked="checked"/>

特点

（1）type="checkbox"代表是多选按钮

（2）name="xx"注意点：多个多选按钮需要保持name的值保持一致

（3）value="xx"代表发送到后端服务器中的值，而不是展示

（4）checked代表初始化页面的时候默认勾选某个人多选框，等价于checked=checked

10.列表框

<select>  <option value=""></option>  </select>

11.图片按钮

（1）reset

<input type="reset"  name="butReset"  value="重置"/>

定义：重置

（2）submit

<input type="submit"  name="butSubmit"  value="提交"/>

定义：提交

特点:

<1>form中action存放了demo009.html页面的全路径

<2>type="submit"触发了当前表单，并跳转到action中的页面

（3）button

定义：普通按钮

<input type="button"  name="butButton"  value="登录"/>

12.多行文本域

<textarea>文本内容</textrea>

13.文件域

<form action="" method="post" enctype="multipart/form-data">  

     <p><input type="file" name="files" />  

           <input type="submit" name="upload" value="上传" /></p>

</form>

14.邮箱

<p>邮箱:<input type="email"  name="email"/></p>

<input type="submit"/>

15.网址

<p>请输入你的网址:<input type="url"  name="userUrl"/></p>

<input type="submit"/>

特点：type="url"代表提交表单后，网址必须符合规范，否则会提示“请输入网址”

16.数字

<p>请输入数字:<input type="number"  name="num" min="0" max="100" step="10"/></p>

<input type="submit"/>

特点：

（1）type="number"代表的含义是展示可以限制用户输入数值范围的标签类型

（2）min代表范围的最小值

（3）max代表范围的最大值

（4）step代表用户每一次选择数值之间的步长

17.滑块

<p>请输入数字:<input type="range"  name="range1" min="0" max="10" step="2"/></p>

<input type="submit"/>

18.搜索

<p>请输入搜索的关键词:<input type="search"  name="sousuo"/></p>

<input type="submit"/>

特点：type="search"代表的含义是带有删除按钮的搜索框（删除按钮在搜索框范围之内）

表单的高级运用

1.隐藏域

<input type="hidden" value="666" name="userid">

typq="hidden"代表当前记录不需要展现在当前行上，但是需要隐藏起来并发送给后端服务器

2.只读和应用

<input name="name" type="text" value="张三"  readonly>

<input type="submit "  disabled   value="保存" >

特点：

（1）readonly代表不可编辑

（2）disabled代表置灰效果且不可编辑

3.表单元素的标注

请选择性别：    

<label for="male">男</label>    

<input type="radio" name="gender" id="male"/>    

<label for="female">女</label>    

<input type="radio" name="gender" id="female"/>

特点：

（1）在input标签中加入id="xx"

（2）在label标签中加入for="xx"

（3）增加鼠标的可用性

（4）自动将焦点转移到该标注相关的表单元素上

表单的初级验证

1.表单的初级验证缘由

（1）减轻服务器压力

（2）安全性

2.表单的初级验证元素标签

（1）placeholder

（2）required

3.placeholder

<input type="search" name="sousuo"  placeholder="请输入要搜索的关键字"/>

特点：

（1）input类型的文本框提供一种提示

（2）可以描述文本框期待用户输入何种内容

（3）提示语默认显示，当文本框中输入内容时提示语消失

（4）适合于input标签：text、search、url、email和password等类型

Value框，输入内容时原有的文字不会消失

4.required

<input type="text" name="username"  required/>

<input type="submit" value="提交" />

特点：

（1）规定文本框填写内容不能为空，否则不允许用户提交表单

（2）适合于input标签：text、search、url、email、password、number、checkbox、radio、file等类型