作用
HTML 中表单用于接收不同类型的用户输入,用户提交表单时向服务器传输数据,从而实现用户与Web服务器的交互。
工作机制
HTML中,表单内容写在<form></form>
标签内,当用户在表单中输入内容并提交后,浏览器会将表单中的数据进行打包,发送给服务器,服务器接收后解析出表单内容并处理。
form标签
form标签的使用方法如下
<form name="" method="" action="" enctype="">
表单项,文字,图片等
</form>
- name表示表单的名称
- action用来指定接收表单数据的服务器页面
- methos是指定表单的传输方式,post或get
- enctype指定传递数据的编码方式
表单中的各式内容,则是在form标签内添加其他标签的方式完成,下面介绍一些常用的标签。
表单中常用的标签
-
input标签,用于向表单输入内容,常见的格式有:
type="text" 文本输入框
type="password" 密码输入框示例
<label for="password">密码</label>
<input type="password" id="password" name="password" placeholder="请输入密码">
- type="radio" 单选按钮
示例
<input type="radio" name="sex" id="male">
<input type="radio" name="sex" id="female">
- type="checkbox" 复选/多选按钮
示例
<input type="checkbox" name="hobby" id="basketball">
<input type="checkbox" name="hobby" id="travel">
<input type="checkbox" name="hobby" id="pet">
- type="hidden" 隐藏域
示例
<input type="hidden" name="csrf" id="xxxxxxxxxxx">
<input type="reset" value="重置">
重置按钮
<input type="button" value="按钮">
普通按钮
<input type="submit" value="提交">
提交按钮
- ttextarea: 长文本输入
示例
<textarea name="article" id="dialog" cols="30"
rows="10" placeholder="ddd"></textarea>
- select:下拉选择列表,闭合标签,用
<option></option>
增加选项。
示例
<label for="password">密码</label>
<input type="password" id="password" name="password"placeholder="请输入密码">