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等类型