HTML表单概述
Posted 橘猫吃不胖～
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML表单概述相关的知识，希望对你有一定的参考价值。
学习目标：
（1）会使用表单的基本结构制作表单页面
（2）会使用各种表单元素实现注册页面
（3）能理解post和get两种提交方式的区别
html表单概述
1.1 表单用途
（1）用户注册
（2）收集信息
（3）信息反馈——调查问卷
（4）搜索引擎
1.2 表单标签
1.2.1 < form >< /form >
<form></form>：表单标签，所有的表单控件必须放在该标签下
| 属性 | 含义 |
|---|---|
| action | 表单数据提交的远程服务器的地址（服务器的URL） |
| method | 表单数据的提交方式，一般为POST（比较安全）或GET方法 |
get与post提交方式的特点：
①get：信息暴露、长度不能超过255字节，但是速度快。
②post：信息隐藏、长度不限，但是速度较慢。
格式：
<form action="URL" method="GET/POST"></form>
1.2.2 < input >
1.2.2.1 常用的type属性
（1）type=“text”，单行输入文本框
格式为：
<input type="text" value="输入元素的默认值" size="文本区的宽度" placeholder="未输入信息时的提示文字">
当value属性和placeholder属性同时出现时，文本框只显示value属性的值。
例如，当使用value属性定义默认值时，文本框中出现了value属性后面的值，这个值可以修改：
<input type="text" value="橘猫吃不胖" size="30">
当使用placeholder属性时，文本框中出现了placeholder属性后面的值，但与value属性不同，这个值不可修改，当文本框中输入信息时此提示消失：
<input type="text" placeholder="请输入姓名" size="30">
如果两个属性同时设在这里插入代码片置，则只显示value属性的值：
<input type="text" placeholder="请输入姓名" size="30" value="橘猫吃不胖">
（2）type=“password”，密码框
格式为：
<input type="password" value="初始密码值" size="密码区宽度">
密码框中的密码会显示为小圆点，对密码进行保护：
<input type="password" value="123456" size="15">
（3）type=“radio”，单选按钮
格式为：
<input type="radio" value="初始值" name="控件的名称" checked>
当checked出现时，按钮默认被选中
<input type="radio" value="男" checked>男
<input type="radio" value="男">男
例：设置男女性别单选按钮：
<input type="radio" name="sex" id="s1" checked>
<label for="s1">男</label>
<input type="radio" name="sex" id="s2">
<label for="s2">女</label>
在本例中，使用label标签是为了将按钮和“男”和“女”进行绑定，达成了点击“男”或者“女”，前面的按钮也会被选中的效果。通过设置两个按钮相同的name名称，不同的id，是为了达成两个按钮只能二选一的效果。让单选按钮和文本进行绑定：radio的id属性值和label的for属性值必须一致。
（4）type=“checkbox”，复选框
格式为：
<input type="checkbox" name="复选框的名称" value="复选框值" checked>
与单选按钮相同，checked表示默认被选中
<input type="checkbox" name="hobby" value="swim" checked>游泳
（5）type=“reset”，重置按钮
格式为：
<input type="reset" name="按钮的名称" value="按钮上显示的文字">
若没有value属性，按钮上默认显示“重置”（只在<form></form>中生效）
<input type="reset" name="按钮的名称" value="重新填写">
（6）type=“submit”，提交按钮，将表单数据提交给action指定的URL
格式为：
<input type="submit" name="按钮的名称" value="按钮上显示的文字">
与重置按钮不同，当没有value属性时，按钮上没有默认文字
<input type="submit" name="按钮的名称" value="提交">
（7）type=“number”，数字输入框
格式为：
<input type="number" max="数字最大值" min="数字最小值">
设置最大值和最小值后，输入框中就不能设置范围之外的值了
<input type="number" max="2" min="1">
（8）type=“date”，日期选择框
<input type="date">
（9）type=“time”，时间选择框
<input type="time">
（10）type=“hidden”，隐藏控件
（11）type=“image”，图片按钮
<input type="image" src="图片的位置">
（12）type=“file”，浏览文件
<input type="file">
（13）type=“color”，选择颜色
<input type="color">
1.2.2.2 其他属性
| 属性 | 含义 |
|---|---|
| disabled | 表示input是否可用(置灰) |
| readonly | 表示input的值只读 |
| required | 表示input是必须要输入的 |
| maxlength | 表示input输入的最大长度 |
| tabIndex | 设置表单控件的tab顺序 |
| title | 设置鼠标经过时的提示文字 |
1.2.3 < select >< /select >
<select></select>标签：下拉列表控件，与<option></option>搭配使用
格式为：
<Select>
<option>选择项</option>
<option>选择项</option>
<option>选择项</option>
</Select>
1.2.4 < textarea >
<textarea>标签：文本区，可以输入多行、多列数据
格式为：
<textarea cols="列数" rows="行数">内容</textarea>
设计表单时，可以在备注区域使用
<textarea cols="30" rows="10">橘猫吃不胖</textarea>
1.2.5 < button >
<button>：按钮控件
格式为：
<button type='按钮的类型'>按钮上的文字</button>
type属性的取值：
| 属性值 | 含义 |
|---|---|
| button | 普通按钮，不含默认的动作 |
| reset | 重置按钮，重置表单控件 |
| submit | 提交按钮，将表单控件的值提交给远程服务器 |
<button type="button">普通按钮</button>
<button type="reset">重置</button>
<button type="submit">提交</button>
1.2.6 < label >< /label >
<label></label>标签：用于显示文本，此标签可以绑定某个表单元素，用于扩展可以相应点击等事件的区域
1.3 强调
（1）所有的表单控件(标签)都可以有id属性，id的属性值不能重复。
（2）所有的表单控件都有value属性，value属性的值会提交给远程服务器。
1.4 实例说明
用表格和表单标签制作表单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单练习</title>
</head>
<body>
<!--开始制作表单-->
<form>
<!-- 制作第一部分内容 -->
<table>
<!-- 第一行 绑定MSN/QQ账号 -->
<tr>
<!-- 将第一行文字向后移动一段距离 -->
<td width="80"></td>
<!-- 紫色三号字 文字在单元格居左对齐 -->
<th align="left">
<font color="purple" size="3">绑定MSN/QQ账号（找到MSN/QQ上的朋友一起玩，或当他们加入关系时，第一时间通知您）</font>
</th>
</tr>
<!-- 第二行 账号类型 MSN账号 MSN密码 -->
<tr>
<!-- 嵌套一个表格布局 -->
<table>
<!-- 第一行 账号类型 -->
<tr>
<!-- 前面空一个单元格对齐 -->
<td width="130"></td>
<!-- 单元格宽度100 文字居右对齐 -->
<td width="100" align="right">账号类型</td>
<!-- 冒号 -->
<td width="1">：</td>
<td>
<label>
<!-- 选择账号类型 用<select></select>标签 -->
<select>
<option> MSN </option>
<option> QQ </option>
</select>
</label>
</td>
</tr>
<!-- 第二行 MSN账号 -->
<tr>
<td width="130"></td>
<td width="100" align="right">MSN账号</td>
<td width="1">：</td>
<td>
<!-- 文本输入框 -->
<input type="text">
</td>
</tr>
<!-- 第三行 MSN密码 -->
<tr>
<td width="130"></td>
<td width="100" align="right">MSN密码</td>
<td width="1">：</td>
<td>
<!-- 密码输入框 -->
<input type="password">
</td>
</tr>
</table>
</tr>
</table>
<!-- 分割线 -->
<hr>
<!-- 制作第二部分内容 -->
<table>
<!-- 第一行 创建您的雅虎邮箱 -->
<tr>
<td width="80"></td>
<th align="left">
<font color="purple" size="3">创建您的雅虎邮箱</font>
</th>
</tr>
<!-- 第二行 选择您的雅虎邮箱等 -->
<tr>
<!-- 用表格布局 -->
<table>
<!-- 第一行 选择您的雅虎邮箱 -->
<tr>
<td width="90"></td>
<td width="140" align="right">选择您的雅虎邮箱</td>
<td>：</td>
<td>
<input type="text">
<!-- b标签加粗@号 -->
<font color="red" size="3"><b>@</b></font>
<select>
<option>yahoo.cn</option>
</select>
</td>
</tr>
<!-- 第二行 密码 -->
<tr>
<td width="90"></td>
<td width="140" align="right">密码</td>
<td width十个html5代码片段，超实用，一定要收藏
如何使子表单行项目在 zoho creator 片段页面的 HTML 表格中仅出现一次？