什么是表单
在网页中, 当我们需要收集用户信息时, 就需要使用表单.(比如平时我们注册账号时的页面)
表单的组成
一个完整的表单通常由表单域, 表单控件, 提示信息3个部分构成
表单的标签
表单域
表单域定义<form>
表单域是一个包含表单元素的区域
HTML中,<form></form>标签用于定义表单域, 以实现用户信息的收集和传递, 会将它范围内的表单元素信息提交给服务器<form action="url地址" method="提交方式" name="表单域名称">
各种表单元素控件
</form>表单域<form>常用属性
| 属性 | 属性值 | 作用 |
|---|---|---|
action | URL地址 | 用于指定接收并处理表单数据的服务器程序的URL地址 |
method | get/post | 用于设置表单数据的提交方式 |
name | 名称 | 用于指定表单的名称,以区分同一个页面中的多个表单域 |
<form>: 表单标签, 在html页面创建一个表单.
表单标签在浏览器上没有任何显示. 如果数据需要提交到服务器,负责收集数据的标签必须存放在表单标签体内action属性: 请求路径. 确定表单提交到服务器的地址(路径)method属性: 请求方式. 常用的取值GET,POST
<body>
<!-- 表单 -->
<form action="" method="">
<!-- 此处的内容可能被提交到服务器 -->
</form>
<!-- 此处的内容在<form>标签外部, 数据不在表单内被提交 -->
</body>输入域标签<input>
<input type="">标签用于获得用户输入信息.
type属性值不同, 收集方式不同.type属性值
type常用属性值
text: 普通文本password: 密码输入框, 里面的密码以黑色小圆点显示radio: 单选框 (实现单选功能需要指定name属性,且属性值相同)checkbox: 多选框 (checked属性表示默认被勾选)file: 上传文件image: 上传图片使用hidden: 隐藏域. 存储数据使用,不会在浏览器页面显示botton: 普通按钮, 配合js使用submit: 提交按钮. 将表单的数据提交到服务器reset: 重置按钮. 将表单恢复到默认状态(清空表单)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="#" method="get">
用户名:<input type="text" /><br />
密码:<input type="password" /><br />
请选择您的性别:<br /> 男<input type="radio" name="sex" checked="checked" /> 女<input type="radio" name="sex" /> <br />
请选择您的爱好:<br /> 篮球<input type="checkbox" /> 足球<input type="checkbox" /> 羽毛球<input type="checkbox" /> 乒乓球<input type="checkbox" /> <br />
<input type="file" /><br />
<input type="image" src="img/xi.jpg" height="100px" width="70px" /><br /> <!-- 需要换成自己图片的地址 -->
<input type="hidden" /><br />
<input type="button" value="我就是个普通按钮" />
<input type="reset" value="重置"/>
<input type="submit" value="提交"/>
</form>
</body>
</html>其它属性
<input>标签的其它常用属性如下
name: 元素名. 如果需要表单数据提交到服务器,必须提供name属性值, 服务器通过属性值获得提交的数据value: 设置<input>标签的默认值.当type为submit或reset时,value的值为按钮显示的数据checked: 单选框或复选框默认被选中readonly: 是否只读disabled: 是否可用
<form action="test01.html" method="post">
用户名<input type="text" name="username"/><br/>
密码<input type="password" name="password"/><br/>
</form>下拉列表标签<select>
<select> 下拉列表, 可以进行单选或多选.
需要使用子标签<option></option>指定列表项常用属性及子标签说明如下
name属性: 发送给服务器的名称multiple属性: 不写则默认单选size属性: 多选时, 可见选项的数目<option>子标签: 下拉列表中的一个选项(一个条目)selected: 勾选当前列表项value: 发送到服务器的选项值
地址<select name="city">
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="guangzhou">广州</option>
<option value="shenzhen">深圳</option>
</select><br/>文本域标签<textarea>
当用户输入内容较多的情况下, 就不能使用文本框表单了.这里就可以使用文本域标签<textarea>
常用属性如下
cols: 文本域占多少列rows: 文本域占多少行name: 发送给服务器的名称
简介<textarea cols="20" rows="10" name="hahh"></textarea><br/>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。