表单标签

186 阅读3分钟

在网页中使用表单目的是收集用户的信息,常用在个人信息页面、注册页面等。

在HTML中,一个完整的表单通常由表单域、表单控件(也称为表单元素)和提示信息3个部分构成。


表单域

是一个包含表单元素的区域。<form>标签用于定义表单域,以实现用户信息的收集和传递。

<form>会把它范围内的表单元素信息提交给服务器。

基本语法:

<form action="url地址" method="提交方式" name="表单域名称">
    各种表单元素控件
</form>

常用属性:


关于提交数据到后台的部分,目前还没学习到,之后再来补充笔记。


表单控件(表单元素)

表单元素就是允许用户在表单中输入或者选择的内容控件。

input输入表单元素

<input>标签用于收集用户信息。

  • type属性

<input>标签中的type属性决定用户输入信息的形式(文本框、复选框、单选按钮等等)。

type属性的属性值:


除了type属性外,<input>标签还有其它属性:


  • name属性

在选用单选按钮时,如果只表明type属性为radio,虽然在浏览器中显示出单选按钮,但是在选择选项时还是可以进行多个选项,这样在数据提交时可能会出错。


因此我们需要利用name属性把单选按钮进行分组。

<form>
    性别:<input type="radio" name="sex" >男  <input type="radio" name="sex" />女 <br>
    每日工作时间:<input type="radio" name="time" />8小时以下  <input type="radio" name="time" />8小时及8小时以上		
</form>


注意:同一组单选按钮和复选框要有相同的name值


  • value属性

value属性用于规定input元素的值,作为提交至后台的默认值。

用户名:<input type="text" value="请输入用户名" />

实现效果:


  • checked属性
这个属性主要针对的是单选按钮和复选框,作用是在用户第一次加载页面时,按钮默认为选中状态。


  • maxlength属性

规定用户输入字段的最大长度。

用户名:<input type="text" maxlength="6" /> /*示例中默认最大长度为6*/

在运行后,如果字数超过最大长度,那会自动进行删减至最大长度。


  • <label>标签
<label>标签为input元素定义标注(标签)。用于绑定一个表单元素,当点击<label>标签内的文本时,浏览器就会自动将焦点转到或者选择对应的表单元素上用来增加用户体验。

<label for="sex">男</label>
<input type="radio" name="sex" id="sex"/>

注意:<label>标签的for属性应该与相关属性的id属性相同。


select下拉表单元素

 在页面中如果有多个选项供用户选择,为了节约页面空间,我们可以使用<select>标签控件定义下拉列表。

<select>
    <option>选项1</option>
    <option>选项2</option>
    <option>选项3</option>
    ...
</select>

  1. <select>里至少包含一对<option>;
  2. 在<option>里定义selected="selected"时,当前项为默认选中项。

textarea文本域元素

在用户输入的内容较多的情况下使用,是用于定义多行文本输入的控件。

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

rows=“显示的行数”,cols="每行中的字符数"  (实际开发中一般用css来调整)