菜鸟高飞路之HTML-表单

火火的菜鸟之路~学习笔记啦

在HTML中，一个完整的表单通常由表单域、表单控件（也称表单元素）和提示信息 三个部分组成

一、表单域

（此部分先进行了解，后续学习服务器编程阶段再进行补充）

表单域：是一个包含表单元素的区域

在HTML标签中，<form> </form> 标签用于定义表单域，以实现用户信息的收集和传递

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

常用属性

属性	属性值	作用
action	url地址	用于指定接收并处理表单数据的服务器程序的url地址
method	get / post	用于设置表单数据的提交方式，其取值为 get 或 post
name	名称	用于指定表单的名称，以区分同一个页面中的多个表单域

二、表单控件（表单元素）

在表单域中可以定义各种表单元素，这些表单元素就是允许用户在表单中输入或者选择的内容控件

(一)、<input>表单元素

在英文单词中，input是输入的意思，而在表单元素中<input>标签用于收集用户信息

 在<input>标签中，包含一个type属性，根据不同的type属性值，输入字段拥有很多种形式(可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等)

注意：1. <input> 标签为单标签

           2. type 属性设置不同的属性值用来指定不同的控件类型

(二)、input 之 type 属性文本框和密码框

1. text  :定义单行的输入字段，用户可在其中输入文本，默认宽度为20个字符

 

 2. password ：定义密码字段，该字段中的字符被掩码

(三)、input 之 type 属性单选按钮和复选框

1. radio :定义单选按钮

 2. checkbox :定义复选框

 

(四)、input 之 name 和 value 属性

 除type属性外，<input> 标签还有其他很多属性

1. name ：

    属性值：由用户自定义 

    描述：定义input元素的名称

 2. value :

     属性值：由用户自定义

     描述：规定input 元素的值

 

 

 注意：1.name 和 value 是每个表单元素都有的属性值，主要给后台人员使用 

            2.name表单元素的名字，要求单选按钮和复选框要有相同的name值

(五)、input 之 checked 和 maxlength 属性

1. checked :

    属性值：checked 

    描述：规定此 input 元素首次加载时应当被选中

 

2. maxlength :

    属性值：正整数

    描述：规定输入字段中的字符的最大长度

 

 注意：1.checked 三种写法 ： checked = "checked" /  checked = ""  /  checked

            2.checked 属性主要针对于单选按钮和复选框，打开页面就可以默认选中某个表单元素

            3.maxlength 是用户可以在表单元素输入的最大字符数，一般较少使用

(六)、input 之 type 属性 提交 和 重置 按钮

1. submit : 定义提交按钮，提交按钮会把表单数据发送到服务器

 

 2. reset :定义重置按钮，重置按钮会清除表单中的所有数据

(七)、input 之 type 属性 普通按钮 和 文件域

 1.button :定义可点击按钮（多数情况下，用于通过javascript启动脚本）

2. file :定义输入字段和“浏览”按钮，供文件上传

 (八)、<label> 标签

<label> 标签为 input 元素定义标签

<label> 标签用于绑定一个表单元素，当点击<label> 标签内文本时，浏览器就会自动将焦点（光标）转到或者选择对应的表单元素上，用来增加用户体验

注意：<label> 标签的for属性应当与相关元素的id属性相同

(九)、<select>下拉表单元素

<select> </select> 标签控件定义下拉列表

<optgroup> </optgroup> 标签把相关的选项组合在一起

 

注意：1. <select> </select> 中至少包含一对 <option> </option>

           2.在 <option> </option> 中定义selected 时，当前项即为默认选中项

(十)、textarea 文本域标签

<textarea> </textarea> 标签是用于定义多行文本输入的控件

 

 通过<textarea> </textarea> 标签可以轻松地创建多行文本输入框

（十一）、表单字段集标签

<fieldset></fieldset>

说明：给表单元素划分区域类似div标签，可以嵌套其他元素，也可以嵌套自己，默认自带边框，disabled定义空间禁制可用

字段集标题：

<legend></legend>

说明：legend元素可以在fieldset对象绘制的方框内插入一个标题。legend元素必须是fieldset内的第一个元素

 

 

三、案例练习