前端必备知识之表单标签


表单的用途

emsp; 表单是用来收集用户信息的。

表单的组成

  由表单域、表单控件、提示信息三个方面组成。

表单域是一个包含表单的区域,用form标签定义,把表单的信息传递到服务器中。

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

method常用的值有get和post。

表单控件

input标签

  input标签用于收集用户信息。其中包含一个type属性,type值有许多(文本,密码等)。<input type="属性值">

常用属性在如下:

属性值描述
text文本输入,默认宽度为20个字符。
password定义密码字段,该字段字符会被掩码。
radio定义单选按钮,实现多选一。多个input标签的name值相同才可实现多选一。
checkbox定义复选框,实现多选。
submit定义提交按钮。把表单的值发送给服务器。
reset定义重置按钮。还原表单的状态。
button定义一个可点击的按钮。通常用于JS启动脚本。
file上传文件。
image定义一个图片按钮。

input的其他属性

属性属性值描述
name由用户自定义定义input元素的名称。
value由用户自定义规定input元素的值。
checkedchecked规定此input元素首次加载时应当被选中。
maxlength正整数规定输入字段中的字符的最大长度。
  1. name和value是每个表单元素都有的属性值,是给后台人员使用的。
  2. name表单元素的名字,要求单选按钮和复选按钮都要有相同的name值

<label>标签

  label标签用于绑定一个表单元素,用于加大点击的范围,使用户获得更好的体验。

语法如下:

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

  for的属性值要与相关标签的id值相同。

下拉表单

  当有许多选项时,又想节约页面空间,就需要使用下拉表单。

语法如下:

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

  <select>标签中至少包含一个<option>标签。在<option>中定义selected="selected"时,当前项即为默认选中项。

文本域标签

  当用户需要输入多行文本时,需要使用文本域标签,常见于留言板,评论等。

语法如下:

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

  rows为行数,cols为每行的字数。开发中不常用。

声明:辉同一般的博客|版权所有,违者必究|如未注明,均为原创|本网站采用BY-NC-SA协议进行授权

转载:转载请注明原文链接 - 前端必备知识之表单标签


代码书写人生