本文深入讲解HTML表单的构成与使用，包括表单标签属性、输入标签类型、下拉列表、多行文本输入框、语义化及label标签的运用，帮助读者掌握表单创建与数据采集技巧。
HTML-12.1-表单标签
<form><表单元素></表单元素></form>
- 表单在网页中主要负责数据采集功能
- 表单的三个基本组成部分
- 表单标签
- 表单域
- 表单按钮
- 表单元素就是HTML中的一些标签
- 在浏览器中所有的表单标签都有特殊特殊的外观和默认的功能
一：表单标签属性
- name
- 表单的名称，用于 js 来操作或控制表单时使用
- id
- 表单的名称，用于 js 来操作或控制表单时使用
- action
- 指定表单数据的处理程序，一般是PHP
- action=“login.php”
- method
- 表单数据的提交方式
- get
- 通过 url (统一资源定位符)地址传输数据，数据会显示在 url
- 传输数据是有大小限制，根据浏览器的不同数据大小不同，相对来说不安全
- 将表单数据，以"name=value"形式追加到action指定的处理程序的后面，两者间用"?“隔开，每一个表单的"name=value"间用”&"号隔开
- 提交的数据类型只限于ASCII字符
- post
- 数据不通过 url 地址传参，相对来说较安全
- 数据传输没有具体的大小限制
- 将表单数据直接发送(隐藏)到action指定的处理程序，action指定的处理程序可以获取到表单数据
- 提交的数据格式是多样的(word, excel, rar, img)
- get
- 表单数据的提交方式
- enctype
- 表单数据的编码方式(加密方式)
- 只能在POST下使用
- 如果表单当中有文件上传必须添加这个属性
- 指定属性值
- application/x-www-form-urlencoded
- multipart/form-data 用于文件转码
<body>
<form action="" method="post" enctype="multipart/form-data">
</form>
</body>
二：输入标签(文本框)
- <input>
- 用于接收用户输入
- <input type=“text” />
1、type
- type=“属性”：文本类型
- text
- 默认
- password
- 密码类型
- radio
- 默认情况下单选框不会互斥
- 需要设置name属性，把同名的单选框添加到同名的分组当中去，在一个分组中的单选框互斥
- checkbox
- 多选按钮，名字相同的按钮作为一组进行选择
- checked
- 将单选按钮或多选按钮默认处于选中状态
- hidden
- 隐藏域，在表单中包含不希望用户看见的信息
- 悄悄收集用户信息
- button
- 普通按钮，结合 js 代码进行使用
- submit
- 提交按钮，传送当前表单的数据给服务器或其他程序处理
- 这个按钮不需要写value，自动就会有“提交”文字
- 表单会提交到 form 标签的 action 属性中的那个页面中去
- reset
- 重置按钮，清空当前表单的内容，并设置为最初的默认值
- image
- 图片按钮，和提交按钮的功能完全一致，只不过图片按钮可以显示图片
- file
- 文件选择框
- email
- 邮箱
- 添加正则表达式校验输入的邮箱格式是否正确
- text
2、value
- value=“内容”
- 文本框里的默认内容(已经被填好的)
3、size
- size=“50”
- 表示文本框内可以显示五十个字符
- 一个英文或一个中文都算一个字符
- 属性值的单位不是像素
4、readonly
- readonly
- 文本框只读，不能编辑
- 光标可以点进去，但是文字不能编辑
5、disabled
- disabled
- 文本框只读，不能编辑，光标点不进去
- 属性值可以不写
<body>
<!-- 输入标签 -->
<form action="" method="post" enctype="multipart/form-data">
请输入用户名：
<input type="text" name="username" value="" placeholder="用户名" readonly="readonly"> <br>
请输入密码：
<input type="password" name="password" value="" placeholder="密码" disabled="disabled"> <br>
性别：
<input type="radio" name="sex" value="boy" checked="checked"> 男
<input type="radio" name="sex" value="girl"> 女 <br>
爱好：
<input type="checkbox" name="like" value="fb" checked="checked"> 足球
<input type="checkbox" name="like" value="si" checked="checked"> 游泳
<input type="checkbox" name="like" value="bk"> 篮球 <br>
请选择文件：<br>
<input type="file"> <br>
图片：<br>
<input type="image" src="../zxc/backgroud.jpg" title="背景图" width="100px"> <br>
<input type="reset" name="reset" value="重置">
<input type="button" name="button" value="提交">
</form>
</body>
三：下拉列表标签
- <select></select>
- <select>标签里面的每一项用<option>表示
- select：选择
- option：选项
- select 标签和 ul, ol, dl一样，都是组标签
1、<select> 标签的属性
- name
- 名称
- multiple
- 可以对下拉列表中的选项进行多选
- 没有属性值
- size=“3”
- 如果属性值大于1，则列表为滚动视图
- 默认属性值为1，即下拉视图
2、<option>标签的属性
- selected
- 预选中
- 没有属性值
<body>
<form action="" method="post" enctype="multipart/form-data">
<!-- 下拉列表标签 -->
学历：<br>
<!-- size：属性值默认为1，即为下拉试图 -->
<select name="xueli" size="3" multiple="">
<!-- selected：预选中，没有属性值 -->
<option selected="">小学</option>
<option selected="">初中</option>
<option>高中</option>
<option>大专</option>
<option>本科</option>
</select>
</form>
</body>
四：多行文本输入框
- <textarea>标签
- text就是文本
- area就是区域
- 属性
- value
- 提交给服务器的值
- rows=“4”
- 指定文本区域的行数
- cols=“20”
- 指定文本区域的列数
- readonly
- 只读
- placeholder
- 提供可描述输入字段预期值的提示信息
- 该提示会在输入字段为空时提示，并会在字段获得焦点时消失
- value
<body>
<form action="" method="post" enctype="multipart/form-data">
请输入简介：<br>
<!-- 多行文本输入框 -->
<textarea name="textarea" cols="20" rows="5" placeholder="简单的描述下自己"></textarea> <br>
<!--
在textarea标签对里可以不用写东西
写了的话就是这个框的默认文字
-->
<textarea name="textarea" cols="20" rows="5">星期一</textarea> <br>
<!-- 对文本区域进行了换行，显示的效果也出现了空白 -->
<textarea name="textarea" cols="20" rows="5">
星期三
</textarea> <br>
<textarea name="textarea" cols="20" rows="5" readonly="readonly">
星期五
</textarea>
</form>
</body>
五：表单的语义化
- <fieldset></fieldset>
- 在注册一个网站的信息的时候，有一部分是必填信息，有一部分是选填信息
- 可以利用表单的语义化
<body>
<fieldset>
<legend>账号信息</legend>
姓名：
<input type="text" name="uesrname" placeholder="请输入姓名"> <br> <br>
密码：
<input type="password" name="password" size="21" placeholder="请输入密码"> <br>
</fieldset>
<fieldset>
<legend>其他信息</legend>
性别：
<input type="radio" name="sex" value="boy" checked> 男
<input type="radio" name="sex" value="girl"> 女 <br>
学历：<br>
<select name="xueli">
<option value="0">小学</option>
<option value="1">初中</option>
<option value="2">高中</option>
<option value="3">大学</option>
</select> <br>
爱好：
<input type="checkbox" name="love" value="swim"> 游泳
<input type="checkbox" name="love" value="football"> 足球
<input type="checkbox" name="love" value="basketball"> 篮球 <br>
个人介绍：<br>
<textarea name="textarea" id="" cols="30" rows="5" placeholder="请介绍自己"></textarea>
</fieldset>
</body>
六：<label>标签
- 任何表单元素都有label
<!--
对于这样的单选框
我们只有点击那个单选框(小圆圈)才可以选中
点击“男”、“女”这两个文字时是无法选中的
于是，label标签派上了用场
-->
<input type="radio" name="sex" value="boy" checked> 男
<input type="radio" name="sex" value="girl"> 女 <br>
- 本质上来讲，“男”、“女”这两个文字和 input标签是没有关系的，而 label 就是解决这个问题的
- 我们可以通过 label 把 input 和汉字包裹起来作为整体
<body>
<!-- 单选框的label -->
<form action="" method="post" enctype="multipart/form-data">
性别：
<!--
input元素要有一个id属性
label标签有一个for属性，和id相同
label和input就有绑定关系
-->
<input type="radio" name="sex" value="boy" id="boy" checked="checked">
<!-- 通过label把input和汉字包裹起来作为一个整体 -->
<label for="boy">男</label>
<input type="radio" name="sex" value="girl" id="girl">
<label for="girl">女</label>
</form>
</body>
<body>
<!-- 复选框的label -->
<form action="" method="post" enctype="multipart/form-data">
爱好：
<input type="checkbox" name="like" value="football" id="football">
<label for="football">足球</label>
<input type="checkbox" name="like" value="swim" id="swim">
<label for="swim">游泳</label>
<input type="checkbox" name="like" value="baseketball" id="baseketball">
<label for="baseketball">篮球</label>
</form>
</body>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
