表单标签（重点）
表单标签：form
- 用户输入内容提交给服务器，与程序交互，使用表单
语法：
<form action="表单提交地址" method="提交方法">
...文本框，按钮等表单元素...
</form>
<!--
action:表单提交地址，交给谁去处理
method:提交方式。主要是post和get
enctype:用于指定表单数据的编码方式
-->- get方式（默认方式）：把请求的参数和值拼接到请求地址之后，
- 值会暴露出来（在地址栏就可以看见，如百度搜索，在地址栏中有搜索内容）
- 值最多不能超过2KB
- post方式：把请求的内容放在请求正文传递过去
- 不过改变URL，值不会暴露
- 基本可以认为无上限，除非做特定限制
- 使用
- 搜索等不用考虑安全因素的：get
- 登录，注册有安全风险的：post
- enctype：编码
- application/x-www-form-urlencoded：默认的编码方式，将表单控件中的值处理成URL编码方式
- mutipart/form-data：以二进制的方式来处理表单数据
- text/plain：当表单的action属性值为mailto：URL的形式时使用
常见的表单元素
input表单元素：
- type：指定类型
- name：用来指定表单元素的名字，提交表单后，通过元素名来获取对应的值
- value：提交的值，和name是一套的
- name和value是非常重要的，会发送到服务器端
- 如下表单：
- 它的初始地址为：http://localhost:63342/WebstormProjects/form_demo.html
- 在输入框中写xiaoming后地址为：http://localhost:63342/WebstormProjects/form_demo.html?username=xiaoming
| 单行文本框 | type->text |
| 密码框 | type->password |
| 单选框 | type->radio 注：
|
| 复选框 | type->checkbox 注意点与单选框相同 |
| 隐藏域 | type->hidden
|
| 图像域 | type->image
|
| 文件上传域 | type->file
|
| 提交、重置、普通按钮’ | type->submit
type->reset
type->button
|
input元素常用的几个属性
| checked | 设置单选框，复选框初始状态是否处于选中状态，只有当type属性值为checkbox和radio时才可以指定 |
| disabled | 设置初次加载时禁用此元素，当type="hidden"时不能指定该属性 |
| maxlength | 该属性是一个数字，指定文本框中所允许输入的最大字符数 |
| readonly | 指定该文本框内的值不允许修改（可以使用JavaScript脚本修改） |
| size | 该属性是一个数字，指定该元素的长度。当type="hidden"时不能指定该属性 |
| src | 指定图像域所显示的图像URL，只有当type="image"时才可以指定该属性 |
button定义按钮
<button type="按钮类型">
普通文本，格式化文本，图像
</button>
<button type="submit|reset|button">
普通文本，格式化文本，图像
</button>
- 比input的按钮更强大
- input显示的只能是普通的文本
- button按钮上可以显示图片，文字，格式化的文字
button常用属性
- disabled 指定是否禁用此元素，该属性只能是disabled或者省略
- name 指定该按钮的唯一名称
- type 指定该按钮属于那种按钮，只能是button，reset，submit
select：列表框
<select name="指定列表名称" size="行数">
<option value="选项值" selected="selected">内容</option> <!--selected表示选中-->
<option value="选项值" selected="selected">内容</option> <!--selected表示选中-->
<option value="选项值" selected="selected">内容</option> <!--selected表示选中-->
......
</select>
- option：一个项
- disable：禁用，该属性只能是disabled或者省略
- selected：默认选中，该属性只能是selected
- value：指定该选项对应的请求参数值
- multiple：多选，默认是单选
select：下拉框
将列表框的size设为即为下拉框，不能使用multiple
在select元素里，只能包含如下两种子元素
- <option>
- <optgroup>
- disabled：把一组禁用
- label：指定该选项组的标签，这个属性必填
<select name="">
<optgroup label="">
<option value="选项值" selected="selected">内容</option>
<option value="选项值" selected="selected">内容</option>
<option value="选项值" selected="selected">内容</option>
</optgroup>
<optgroup label="">
<option value="选项值" selected="selected">内容</option>
<option value="选项值" selected="selected">内容</option>
<option value="选项值" selected="selected">内容</option>
</optgroup>
</select>
textarea：多行文本框
<textarea name="..." cols="列宽" rows="列高">
文本内容
</textarea>
- cols：宽度，该属性必填
- rows：搞定，该属性必填
- readonly：指定该文本框只读。该属性只能是readonly或省略
示例代码展示
<!--表单演示-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单</title>
</head>
<body>
<form action="" method="get">
<!--input-->
姓名：<input type="text" name="username" disabled value="123"/ ><br/> <!--单行文本款，
/加不加都可以,disabled属性表示不可用，readonly属性表示只读，size表示可视化字符个数即看得到多少字符，value添加默认值-->
密码：<input type="password" name="password" maxlength="10"><br/> <!--密码框 maxlength属性是一个数字，指定文本框中所允许输入的最大字符数-->
性别：<input type="radio" name="sex" value="male" checked>男 <!--单选框 checked 设置默认选中-->
<input type="radio" name="sex" value="female">女<br/>
爱好：<input type="checkbox" name="hobby" value="basketball" checked>篮球 <!--复选框-->
<input type="checkbox" name="hobby" value="football">足球
<input type="checkbox" name="hobby" value="running">跑步
<input type="checkbox" name="hobby" value="sleepping">睡觉<br/>
<input type="hidden" name="test" value="testvalue"> <!--隐藏域，可以通过提交后看地址栏是否有值
如：http://localhost:63342/WebstormProjects/form_demo.html?username=123&password=&sex=male&hobby=basketball&test=testvalue
-->
<!--图像域，可以通过width和height修改图片大小-->
<input type="image" name="test" src="imgs/卫庄&赤练.jpg" width="136px" height="77px">
<!--select列表框-->
<hr/>
<select name="city" size="4" multiple> <!--size显示的行数 multiple表示多选,不加单选-->
<option value="beijing" selected="selected">北京</option> <!--selected表示选中-->
<option value="hangzhou" selected="selected">杭州</option>
<option value="guiyang" selected="selected">贵阳</option>
<option value="shanghai" selected="selected">上海</option>
<option value="shenzhen" selected="selected">深圳</option>
<option value="suzhou" selected="selected">苏州</option>
</select><br/><br/>
<!--select下拉框,size改为1即为下拉框，不能加multiple-->
<select name="city">
<option value="beijing" selected="selected">北京</option>
<option value="hangzhou" selected="selected">杭州</option>
<option value="guiyang" selected="selected">贵阳</option>
<option value="shanghai" selected="selected">上海</option>
<option value="shenzhen" selected="selected">深圳</option>
<option value="suzhou" selected="selected">苏州</option>
</select>
<!--optgroup 将option分组-->
<br/><br/>
<select name="city">
<optgroup label="南方">
<option value="hangzhou" selected="selected">杭州</option>
<option value="guiyang" selected="selected">贵阳</option>
<option value="shenzhen" selected="selected">深圳</option>
<option value="suzhou" selected="selected">苏州</option>
</optgroup>
<optgroup label="北方">
<option value="shanghai" selected="selected">上海</option>
<option value="beijing" selected="selected">北京</option>
</optgroup>
</select>
<!--文本框-->
请输入您的建议：
<textarea name="subject" cols="30" row="5"></textarea>
<br/>
<!--文件域-->
<input type="file"><br/>
<input type="submit" value="提交" /> <!--提交按钮-->
<input type="reset" value="重置"> <!--重置按钮-->
<input type="button" value="普通按钮"> <!--普通按钮-->
<!--button-->
<button type="submit">提交</button>
</form>
</body>
</html>
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
