表单的学习笔记

表单就是用来收集信息，填入数据的。就像我们在生活中填的调查表，保险单等。表单元素允许我们在页面里填入信息、选择对应信息等，下面我们就来学习一下，也做出来一个表单。

首先要先了解表单元素，通过元素才能做出大概轮廓，再用属性来设置需求。

一、表单元素

• form：定义供用户输入的表单。
• fieldset：定义域。即输入区加有文字的边框。
• legend：定义域的标题，即边框上的文字。
• label：定义一个控制的标签。即输入框前的文字。
• input：定义输入域，可设置type属性。
• textarea：定义文本框，默认可通过鼠标拖动调整 大小。
• button：定义按钮。
• select：定义选择列表，下拉的选择列表。
• optgroup：下拉列表的分类标签
• option：下拉列表中的选项。

在了解完元素之后，了解下表单的属性，为了做出更加丰富完美的表单。

二、表单属性

aside	侧边栏
get post	发送表单数据常用值
readonly	只读属性
disabled	禁用属性
action	表示向何处发送表单数据：action="目标网页"
type	指定元素的类型
name	指定表单元素的名称
value	元素的提交值：value(type为radio时必须指定一个值)
size	指定表单元素的初始宽度：size(type为text或passwork时,表单元素的大 小以字符为单位,对于其他类型,宽度以像素为单位)
maxlength minlength	输入的最大字符数和最小字符数(type为text或passwork时)： maxlength、minlength
checked	type为radio或checkbox时,指定按钮默认被选中
placeholder	input类型文本框内容提示(hint)：placeholder="内容提示语"(提示语默认 显示,当文本框中输入内容时提示语消失)
required	规定文本框填写不能为空,否则不允许用户提交表单
pattern	用户输入的内容必须符合正则表达式所指的规则,否则无法提交表单 (pattern="正则表达式")： ①昵称：pattern="[-\w\u4E00-\u9FA5]{4,10}"

先大致了解每个属性的作用，下面会详细解释到每个元素、属性的用法、作用、效果。

三、表单的组成（重要）

3.1表单域（form）

1）定义：表单域是一个包含表单元素的区域。

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

<form>窗体顶端会把它范围内的表单元素信息提交给 服务器.

2）语法格式：

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

3）相关属性：

• action：url地址  ； 指定接收并处理表单的数据的服务器程序的url地址。
• method：“get” “post”  ；表单的提交方式。   
• get：从服务器获取数据，数据长度有限制，安全性低，容易被第三方看见，能缓存   。
• post：向服务器提交数据，数据长度不限，安全性高，不能缓存，（一般情况下推荐）。
• name：名称  ；表单名称。

 3.2<input>属性

 1）定义：在表单元素中<input>标签用于收集用户信息。

在 <input> 标签中，包含一个 type 属性，根据不同的 type 属性值，输入字段

拥有很多种形式。

2）语法格式：

<input type="属性值" />

3）属性

属性值	描述
button	可点击按钮
checkbox	定义复选框
file	定义输入字段和浏览按钮供文件上传
hidden	定义隐藏的输入字段
image	定义图像形式的提交按钮
password	定义密码字段,该字段中字符被掩盖
radio	定义单选按钮
reset	定义重置按钮，重置按钮会清除表单中的所有设置数据
submit	定义提交按钮，提交按钮会把表单数据发送到服务器
text	定义单行的输入字，用户可在其中输入文本默认宽度为二十个字符（size）

除 type 属性外，<input>标签还有其他很多属性，其常用属性如下：

属性	属性值	描述
name	用户自定义	定义input元素名称
value	用户自定义	规定input元素的值
checked	checked	规定input元素首次加载被选中
maxlength	正整数	规定输入文字中字符的最大程度

1）文本框

语法：

<input type="text(文本框)" name="text" maxlength="最大长度值" minlength="

最小长度值">

        <tr>
            <th>所在地区</th>
            <th align="left">
           
                <input type="text" placeholder="北京思密达"> 
            </th>
        </tr>

placeholder 是提示文本

2）密码框

<input type="password(密码框)" name="passwork" maxlength="最大长度值"

minlength="最小长度值">

3）复选框

<input type="checkbox" id="checkbox1" name="checkbox" value="复选框">单身

<input type="checkbox" id="checkbox2" name="checkbox" value="复选框">已婚

<input type="checkbox" id="checkbox3" name="checkbox" value="复选框">离婚

示例：

 <tr>
            <th>喜欢的类型</th>
            <th align="left">
                <input type="checkbox" id="checkbox1" name="checkbox" value="复选框">可爱的
                <input type="checkbox" id="checkbox2" name="checkbox" value="复选框">小鲜肉
                <input type="checkbox" id="checkbox3" name="checkbox" value="复选框">老腊肉

            </th>
        </tr>

4）单选框

<input type="radio" id="radio" name="radio" value="单选按钮">男

<input type="radio" id="radio2" name="radio" value="单选按钮">女

5）邮箱

<input type="email" name="email">

6）网址

<input type="url(网址)" name="userUrl">

type="url" 属性用于指定这是一个网址输入框，这样浏览器可以对输入的值进行验证。如 果用户输入的值不是有效的网址格式，浏览器会显示一个错误提示

7）数字

可以使用 标签和 type="number" 属性来创建一个数字 输入框。这个输入框将限制用户输入的内容只能是数字，同时也提供了一些控制输入值范 围的属性，例如 min 和 max 属性，用于设置允许输入的最小值和最大值，以及 step 属性， 用于设置每次增加或减少的步长。

<input type="number" name="number" min="允许的最小值" max="允许的最

大值" step="合法的数字间隔">

8）滑块

可以使用 <input> 标签和 type="range" 属性来创建一个滑块控

件。滑块控件可以让用户通过拖动滑块来选择一个数值，这个数值可以是整数或浮点数，

也可以设置最小值、最大值和步长。

<input type="range" name="range" min="允许的最小值" max="允许的最大值

" step="合法的数字间隔">

9）搜索框

可以使用 <input> 标签和 type="search" 属性来创建一个搜索

框控件。搜索框控件可以让用户输入关键词，然后通过提交表单或者监听 onsearch 事件来

触发搜索操作。

<input type="search(搜索框)" name="sousuo">

10）隐藏域

隐藏域是一种在 HTML 表单中隐藏输入控件的方法。隐藏域的作用是在表

单提交时向服务器传递一些数据，这些数据不需要用户进行手动输入或选择，而是由开发

者在 HTML 代码中提前设置好的。

<input type="hidden(隐藏域)" value="666" name="userID">

11）重置按钮

重置按钮（Reset）是 HTML 表单中的一个按钮，用于将输入框、文本域

等表单元素的值恢复为默认值。当用户在填写表单时，一些输入值可能已经被修改，而用

户希望还原为初始状态时，可以使用重置按钮。

<input type="reset" name="butReset" value="reset 按钮">

12）提交按钮

提交按钮（Submit）是 HTML 表单中的一个按钮，用于提交表单数据。

当用户填写完表单后，点击提交按钮，表单数据就会被发送给服务器进行处理。

<input type="submit" name="butSubmit" value="submit 按钮">

13）、普通按钮

普通按钮（Button）是 HTML 表单中的一个按钮，与提交按钮不同，它 没有预定义的行为。相当于一个可自定义操作的按钮。

<input type="button" name="butButton" value="button 按钮">

3.3<label>标签

（1）定义：<label> 标签为 input 元素定义标注（标签）。用于绑定一个表单

元素, 当点击<label> 标签内的文本时，浏览器就会自动将焦点(光标)转到或者选择对应的

表单元素上,用来增加用户体验.

（2）语法：

<label for="sex">男</label>

<input type="radio" name="sex"  id="sex" />

（3）核心： <label> 标签的 for 属性应当与相关元素的 id 属性相同。

3.4<select> 表单元素

（1）使用: 如果有多个选项让用户选择，并且想要节约页面空间时，下拉列表框使用 <select> 元素，并在元素内添加 <option> 元素作为选项。其具有size属性，一旦给size属性，<select>元素会自动生成列表数组。

 <select name=”select” id=”select” >

                    <option value="year">--请选择年份--</option>

                    <option value="year">2001</option>

                    <option value="year">2002</option>

                    <option value="year">2003</option>

                    <option value="year">2004</option>

   </select>

“optgroup” 是 HTML 中用于对下拉列表中的选项进行分组的标签。

使用 “optgroup” 可以使下拉菜单更加清晰和有条理。它允许你将相关的选项组合在一起，并为每个组提供一个标签。

<select>

<optgroup label="天津">

<option>包子</option>

<option>麻花</option>

</optgroup>

</select>

<select>

<optgroup label="北京">

<option selected="selected">烤鸭</option>

<option>炸酱面</option>

</optgroup>

</select>

3.5 <textarea> 表单元素

（1）定义：

<textarea> 标签是用于定义多行文本输入的控件。使用多行文本输入控件，可以输入更多的文字，该控件常见于留言板，评论。框的大小可以用鼠标调大小

（2）语法：

<textarea name="showText" cols="显示的列数" rows="显示的行数">文本内

容</textarea>

通过 <textarea> 标签可以轻松地创建多行文本输入框。cols=“每行中的字符数” ，rows=“显

示的行数”我们在实际开发中不会使用，都是用 CSS 来改变大小。

案例：

<th>自我介绍</th>

            <th align="left">

            <textarea name="showText" cols="20" rows="2"></textarea>

            </th>

学到了吧