likes
comments
collection
share

HTML标签 之 表单

作者站长头像
站长
· 阅读数 34

在网页中,在我们需要收集用户信息的时候,就会用到表单。比如注册账号时有时候需要用户的名字、性别、出生日期、电话、邮箱等,就可以用表单来处理。

一个完整的表单通常由表单域表单控件(表单元素)提示信息 3 个部分构成。

HTML标签 之 表单

一、表单域

表单域是一个包含表单控件的区域,在 HTML 标签中,<form> 标签用来定义表单域,以实现用户信息的收集和传递。<form> 会把它范围内的表单元素信息提交给服务器。

<form action="url" method="post" name="test">
   ...    // 表单控件
</form>
  • action:值为 url 地址,用于指定接收并处理表单数据的服务器程序的url地址
  • method:值为 get 或 post, 用于设置表单数据的提交方式
  • name:用于指定表单的名称,因为同一个页面中可能有多个表单域。

二、表单控件

1、<input> 表单控件

input 是输入的意思,在表单控件中,<input> 标签用于收集用户信息。

<input> 标签中,包含一个必须的 type 属性,根据 type 不同的值,<input> 可以有多种形式:文本、复选框、单选按钮、按钮等。

<input type="text" />    <!-- <input> 也是单标签 -->
type 属性值说明
text定义单行的输入字段,用户可以在里面输入文本,例如输入用户名
password定义密码字段,用户输入后看不到明文,一般输入密码时用到
radio定义单选按钮,比如在选择性别时,实现多选一(多个 radio 必须有相同的 name 才能实现真正的多选一
checkbox定义复选框,比如在选择“我喜欢的栏目”时,可以同时选择多个(多个 checkbox 有相同的 name 才能把所有的选择都正确传到服务端
button定义可点击按钮,value 值可以设置按钮文字
file定义输入字段和“浏览”按钮,供文件上传
reset定义重置按钮,重置按钮会清除表单中的所有数据
submit定义提交按钮,提交按钮会把表单数据发送到服务器
hidden定义隐藏的输入字段
image定义图像形式的提交按钮

<input> 标签其他常用属性:

属性属性值说明
name自定义定义 input 控件的名称
value自定义定义 input 控件的值
checkedchecked此 input 控件首次加载时应当被选中
maxlength正整数输入文字时字符的最大长度
  1. name 和 value 是每个表单控件都有的属性值,主要给后台人员使用
  2. name 是表单控件的名字,要求单选按钮和复选框都要有相同的 name 值

2、<label> 标签

<label> 标签用于绑定一个表单控件,当点击 <lable> 标签内的文本时,浏览器就会自动将光标转到对应的表单控件上,提升用户体验。(可以理解为增大点击区域了)

  <!-- 这样在点击“男”这个字时,也会选中该单选框 -->
  <label for="sex">男</label>
  <input type="radio" name="sex" id="sex" />

注意:<label> 标签的 for 属性应当与相关控件的 id 属性相同

3、<select> 下拉表单控件

当页面中有多个选项让用户选择时,想要节约页面空间,我们可以使用 <select> 标签控件定义下拉列表。例如我们在选择省份和地区时。

<select>
  <option>北京</option>
  <option>天津</option>
  <option>河北</option>
  <option selected="selected">山西</option> 
  <!--在 <option> 中定义 selected="selected",当前项为默认选中项-->
  ...
</select>

4、<label> 文本域控件

当用户需要输入较多内容时,可以使用 <textarea> 标签,它用于定义多行文本输入的控件。比如留言板、评论等。

<textarea rows="3" cols="20">
  默认的文本内容
</textarea>

其中属性 cols 为每行中的字符数,rows 为显示的行数,实际开发中用 CSS 来控制。

转载自:https://segmentfault.com/a/1190000041912868
评论
请登录