第三天HTML中input标签常用属性、框架集、内嵌框架

一、input标签常用属性
- 表单数据提交特点：
- （一）、文本框（text）
- （二）、密码框（password）
- （三）、单选按钮（radio）
- (四）、复选框（checkbox）
- （五）、日期时间（date）
- （六）、邮箱（email）
- （七）、按钮（submit、image、reset、button）
- （八）、下拉列表（select）
- （九）案例源码
- （十）、案例运行效果
二、其它表单属性
- （一）、隐藏域（fidden）
- （二）、文件域（file）
- （三）、多行文本框（textarea）
- （四）、案例源码
- （五）、案例运行效果
三、框架集（frameset、frame）
- （一）、框架集的使用
- - 1、首先准备好导航、版权、左侧、右侧、以及中间点击显示的网页
  - 2、新建主页，删掉body标签，将网页分割为上中下三块
  - 3、将中间块再分割为左中右三块
  - 4、将相应网页用frame标签插入框架集中（完成）
- （二）、案例源码
- （三）、案例运行效果
四、内嵌框架（iframe）

一、input标签常用属性

表单常用于收集用户输入，然后提交给服务器，由于收集数据种类繁杂，如果只使用文本域收集数据，对数据的格式校验、转换等都存在较大困难，故常使用不同表单属性来收集各种类型的数据，可以减少数据格式校验和转换的困难！常用的表单属性有单行文本域（text）、密码框（password）、单选按钮（radio）、复选框（checkbox）、日期时间（date）、邮箱（email）、提交按钮（submit）、图片按钮（image）、重置按钮（reset）、普通按钮（button）······

表单数据提交特点：

表单数据均以键值对方式提交给服务器，键为name属性的值，值为用户输入，部分类型除外(单选按钮、复选框、下拉列表等，值为value定义的值)

（一）、文本框（text）

用于收集少量文本数据，不可换行。

<input type="text" name="uname" placeholder="张三" autofocus="autofocus" autocomplete="on"  pattern="^[a-zA-Z]\w{5,29}$" title="请输入用户名6-30位字母、数字或“_”,字母开头"/>
type="text"：定义该input类型为文本框
name="uname" ：这个文本框的名字叫做“uname”
placeholder="张三"：文本框内显示提示信息“张三”，仅当文本框为空时存在
autofocus="autofocus"：网页加载即获得焦点
autocomplete="on"：表单提交后点击回退按钮，浏览器使用提交前内容自动填写表单（正常操作会清空表单）
required="required" ：提示用户必须输入，不能为空，空则无法提交
pattern="^[a-zA-Z]\w{5,29}$"：使用正则表达式验证用户输入内容
title="请输入用户名6-30位字母、数字或“_”,字母开头"：鼠标悬停及输入不合法内容的提示信息

（二）、密码框（password）

用于网页密码输入，不显示字符，用圆点或星代替。

<input type="password" name="pwd" required="required" pattern="^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[a-zA-Z0-9]{8,}$" title="密码必须包含大小写字母和数字的组合，可以使用特殊字符，至少8位"/>
type="password"：定义一个密码框
name="pwd"：这个密码框的名字叫“pwd”
required="required"：这框必须输入不能为空，空的无法提交
pattern="^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[a-zA-Z0-9]{8,}$"：使用正则表达式验证用户输入内容
（密码必须包含大小写字母和数字的组合，可以使用特殊字符，至少8位）
不符合就提示用户（提示内容见title）

（三）、单选按钮（radio）

单选按钮具有互斥性，只能选择一组中的一个！

<input type="radio" name="sex"  value="0"  checked="checked"/>男
<input type="radio" name="sex"  value="1"  />女
type="radio"：定义一个单选按钮
name="sex"：单选按钮的组名（同一组的单选按钮，该名称必须相同），这就是表单提交键值对中的键名，必须具有唯一性
value="0" ：表单提交键值对中的值（注意提交的数据不是“男”，是“0”）
checked="checked"：表示该按钮默认选中

(四）、复选框（checkbox）

复选框常用于选择一组预先定义的内容，可多选，选项间不存在互斥性。

<input type="checkbox" name="protocol" value="1"/>我已阅读并同意遵守···
type="checkbox"：定义一个复选框
name="protocol"：组名叫protocol，同单选框同一组复选框组名必须一致
value="1"：勾选后提交表单时键值对中的值，未定义该属性，则默认为“on”

（五）、日期时间（date）

日期时间类似插件，可供用户手动选择日期，以减少手动输入造成的错误日期！
部分浏览器不支持

<input type="date" name="birthday" />
type="date"：定义一个日期选择框，可弹出日期选择窗口
name="birthday"：提交表单时键值对的键名

（六）、邮箱（email）

用于接收邮箱输入，输入完毕浏览器会校验输入是否合法。

<input type="email" name="email"/>
type="email"：定义一个接收邮箱的文本框

（七）、按钮（submit、image、reset、button）

submit、image按钮点击提交表单数据至action中的地址；
reset按钮点击清空表单数据；
button按钮常与JS连用，实现特定功能。

<input type="submit" value="注册" />
<input type="image" src="img/submit.png" />
<input type="reset" value="重置" />
<input type="button" name="button" value="普通按钮，常用于JS触发事件" onclick="test()"/><script type="text/javascript">function test(){alert("我是JS！");}</script>

（八）、下拉列表（select）

从一组特定选项中选择一项。

<select name="IDType"><option value="0" selected="selected">中国居民身份证</option><option value="1">港澳居民来往内地通行证</option><option value="2">台湾居民来往内地通行证</option><option value="3">护照</option></select><select></select>定义下拉列表name="IDType"：返回服务器的键名value="0"：该项的值

（九）案例源码

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>表单元素学习</title></head><body><form action="#" method="get"><table border="1" width="50%"><tr><td>用户名：</td><td><input type="text" name="uname" placeholder="ZhangSan123" autofocus="autofocus" autocomplete="on" required="required" pattern="^[a-zA-Z]\w{5,29}$" title="请输入用户名6-30位字母、数字或“_”,字母开头"/></td><td>6-30位字母、数字或“_”,字母开头</td></tr><tr><td>登录密码：</td><td><input type="password" name="pwd" required="required" pattern="^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[a-zA-Z0-9]{8,}$" title="密码必须包含大小写字母和数字的组合，可以使用特殊字符，至少8位"/></td><td>密码必须包含大小写字母和数字的组合，可以使用特殊字符，至少8位！</td></tr><tr><td>确认密码：</td><td><input type="password" name="conpwd" /></td><td>密码需要与上面一致</td></tr><tr><td>证件类型：</td><td><select name="IDType"><option value="0" selected="selected">中国居民身份证</option><option value="1">港澳居民来往内地通行证</option><option value="2">台湾居民来往内地通行证</option><option value="3">护照</option></select></td><td>&nbsp;</td></tr><tr><td>姓名：</td><td><input type="text" name="name"/></td><td>&nbsp;</td></tr><tr><td>证件号码：</td><td><input type="text" name="ID" required="required" pattern="(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)" title="请输入正确的身份证号码"/></td><td>&nbsp;</td></tr><tr><td>证件有效期：</td><td><input type="date" name="IDperiod"/></td><td>&nbsp;</td></tr><tr><td>出生日期：</td><td><input type="date" name="birthday" /></td><td>&nbsp;</td></tr><tr><td>性别：</td><td><input type="radio" name="sex"  value="0" checked="checked"/>男<input type="radio" name="sex"  value="1" />女</td><td>&nbsp;</td></tr><tr><td>邮箱：</td><td><input type="email" name="email"/></td><td>&nbsp;</td></tr><tr><td>手机号码：</td><td><input type="number" name="phoneNumber"/></td><td>&nbsp;</td></tr><tr><td>旅客类型：</td><td><select name="travellerType"><option value="0" selected="selected">成人</option><option value="1">儿童</option><option value="2">学生</option><option value="3">伤残军人</option></select></td><td>&nbsp;</td></tr><tr><td>&nbsp;</td><td colspan="2"><input type="checkbox" name="protocol" value="1"/>我已阅读并同意遵守 <a href="#">《中国铁路客户服务中心网站服务条款》 《隐私权政策》</td></tr><tr><td><input type="submit" value="注册" /></td><td><input type="image" src="img/submit.png" /></td><td><input type="reset" value="重置" /><input type="button" name="button" value="普通按钮，常用于JS触发事件" onclick="test()"/><script type="text/javascript">function test(){alert("我是JS！");}</script></td></tr></table></form></body>
</html>

（十）、案例运行效果

二、其它表单属性

（一）、隐藏域（fidden）

隐藏域用于记录一些不需要用户知道，但是对服务器有用的信息，隐藏域的内容不显示在窗口中！

<input type="hidden" name="ID" value="我是隐藏域，你看不见我" />
type="hidden"：定义隐藏域
name="ID"：键名，让服务器知道是谁
value="我是隐藏域，你看不见我"：返回服务器的数据，用户看不见

（二）、文件域（file）

文件域用于向服务器传递文件。

<input type="file" name="image" />
type="file"：定义文件域

（三）、多行文本框（textarea）

能显示多行文本，收集用户输入或者向用户展示大量文本时使用，可设置只读。

<textarea name="春夜喜雨" rows="10" cols="40" readonly="readonly">好雨知时节，当春乃发生。随风潜入夜，润物细无声。野径云俱黑，江船火独明。晓看红湿处，花重锦官城。
</textarea>
<textarea></textarea>：定义多行文本框
rows="10" cols="40"：设置文本框大小
readonly="readonly"：设置只读模式（默认不开启）

（四）、案例源码

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>其它表单元素</title></head><body><form action="#" method="get"><table border="1" width="50%"><tr><td>隐藏域</td><td><input type="hidden" name="ID" value="我是隐藏域，你看不见我" /></td></tr><tr><td>文件域</td><td><input type="file" name="image" /></td></tr><tr><td>多行文本域</td><td><textarea name="春夜喜雨" rows="10" cols="40" readonly="readonly">好雨知时节，当春乃发生。随风潜入夜，润物细无声。野径云俱黑，江船火独明。晓看红湿处，花重锦官城。</textarea></td></tr><tr><td colspan="2"><input type="submit"/></td></tr></table></form></body>
</html>

（五）、案例运行效果

三、框架集（frameset、frame）

框架集主要用于页面的整体布局。

一般网页布局分上中下，左中右，如上图表示的那样，中间窗格根据用户点击展示不同内容，这就是框架集实现的。

（一）、框架集的使用

1、首先准备好导航、版权、左侧、右侧、以及中间点击显示的网页

FrameHead.html：导航页
FrameFooter.html：版权页
FrameLeft.html：左侧页面
FrameRight.html：右侧页面
FrameJiaoCHeng.html：内容页1
FrameBianJiQi.html：内容页2
FrameJianJie.html：内容页3
FrameJiChu.html：内容页4
左侧页面部分源码
<ul><li><a href="FrameJiaoCHeng.html" target="center">教程</a></li><li><a href="FrameJianJie.html" target="center">简介</a></li><li><a href="FrameBianJiQi.html" target="center">编辑器</a></li><li><a href="FrameJiChu.html" target="center">基础</a></li>
</ul>
target="center"：目标页面在center（center在中间窗格定义）这个地方显示
默认（_self）在本页面显示，覆盖当前页面

2、新建主页，删掉body标签，将网页分割为上中下三块

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>框架学习</title></head><frameset rows="140,*,290" frameborder="0"><frame src="FrameHead.html" /><frame /><frame src="FrameFooter.html"/></frameset>
</html>
rows="140,*,290"：将页面分为上中下三块，上140px，下290px，剩下的给中
frameborder="0"：不显示框架边框
<frame src="FrameHead.html" />：用frame标签插入网页

3、将中间块再分割为左中右三块

<frameset rows="140,*,290" frameborder="0"><frame src="FrameHead.html" /><frameset cols="120,*,200"><frame src="FrameLeft.html"/><frame src="FrameJiaoCHeng.html" name="center"/><frame src="FrameRight.html" /></frameset><frame src="FrameFooter.html"/></frameset>cols="120,*,200"：cols左中右分割<frame src="FrameJiaoCHeng.html" name="center"/>：插入中间窗格网页name="center"：位置标记，左侧页面点击跳转时使用

4、将相应网页用frame标签插入框架集中（完成）

<frameset rows="140,*,290" frameborder="0"><frame src="FrameHead.html" /><frameset cols="120,*,200"><frame src="FrameLeft.html"/><frame src="FrameJiaoCHeng.html" name="center" scrolling="no"/><frame src="FrameRight.html" /></frameset><frame src="FrameFooter.html"/></frameset>scrolling="no"：不显示滚动条

（二）、案例源码

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>框架学习</title></head><frameset rows="140,*,290" frameborder="0"><frame src="FrameHead.html" /><frameset cols="120,*,200"><frame src="FrameLeft.html"/><frame src="FrameJiaoCHeng.html" name="center" scrolling="no"/><frame src="FrameRight.html" /></frameset><frame src="FrameFooter.html"/></frameset>
</html>

（三）、案例运行效果

四、内嵌框架（iframe）

内嵌框架主要用于页面复用。便于修改，
内嵌框架的本质就是在需要该网页的地方使用网页引用，这样只要修改被引用的网页，引用该网页的地方就都修改了！

内嵌框架在body中，不能删除body！

<iframe src="Iframe_123406head.html" width="100%" height="140"></iframe>
<iframe src=""></iframe>：定义内嵌框架
src="Iframe_123406head.html"：被引用网页的地址
width="100%" height="140"：设置引用网页的大小

Web学习第三天——HTML中input标签常用属性、框架集、内嵌框架相关推荐

CTF Web学习（三）----python脚本的编写及应用
CTF Web学习(三) python脚本的编写及应用 CTF Web学习目录链接 CTF Web学习(一):基础篇及头文件修改.隐藏 CTF Web学习(二):代码审计.burp suite应用 C ...
HTML中input标签使用法汇总
HTML input标签的属性: 1.type:该属性是input标签里唯一的必须输入的属性,当然,也可以不填,默认为type = "text".具体它有那些值,我们后面再讨论. ...
HTML5/HTML中input标签用法解读
HTML5/HTML中<input>标签用法解读 OK!今天博主为小伙伴们介绍的内容是HTML5/HTML中<input>标签的用法,,, ,emmm图文并茂哦! 喜欢博主的粉 ...
在php中标签input用法,html input标签的属性有哪些？input标签的用法总结（附实例）...
本篇文章主要的向大家介绍了关于html input标签的属性,还有关于html input标签的具体的用法总结.让我们一起来看看html input标签有哪些用法吧首先先来说说html input标 ...
Easyui中input标签设置只读
Easyui中input标签设置只读直接在input标签中设置属性:readonly="readonly". 具体例子: <input class="easyui ...
IOS系统中input标签获取焦点页面会放大的问题
IOS系统中input标签获取焦点页面会放大的问题在iOS系统中打开网页,input框输入时,输入框获取焦点的时候页面会放大,如果没有经过设置,页面放大之后就不会自动还原.使内容撑开浏览器,底部产生 ...
vue中input标签的使用
vue中input标签的使用普通input标签 <input type="text" value="" placeholder="placeh ...
html input标签的属性有哪些？input标签的用法总结（附实例）
首先先来说说html input标签的属性: 1.type:该属性是input标签里唯一的必须输入的属性,当然,也可以不填,默认为type = "text".具体它有那些值,我们后 ...
表单input标签type属性详解
目标:详解表单input标签type属性常用的属性值一.input标签和它的type属性 PS:input 元素可以用来生成一个供用户输入数据的简单文本框. 在默认的情况下, 什么样的数据均可以输入 ...

Web学习第三天——HTML中input标签常用属性、框架集、内嵌框架