HTML之表单

目录

• 表单的结构
• get方式与post方式
• 输入
• 单行文本输入框
• 提交按钮和重置按钮
• 密码输入框
• 复选框
• 单选按钮
• 图像按钮
• 文本选择输入框
• 隐藏框
• 多行文本输入框
• 下拉列表框
• 新增输入元素
• 新增其他元素

表单的结构

<form name="" action="" method="">
    <input>
    ...
    <select>...</select>
    <textarea>...</textarea>
</form>

（1）name：表单名称，在为表单命名之后就可以使用脚本语言对它进行控制；

（2）action：动作属性，指定处理表单信息的服务浏览器应用端。

（3）method：方法属性，用于指定表单向服务器提交数据的方法，method的值可以为get或post，默认为get。

get方式与post方式

1、get方法

使用 get 方法提交数据，浏览器将把表单中的各个值添加到 action 指定的URL（这两者之间用问号分割）并向服务器发送 get 请求，每个值之间用符号“&”链接。IE地址栏最大的URL长度是2083个长度，最大可以传递的数据长度2048个字符，所以用户不要对数据量较多的表单使用 get 方法。且 get 限制表单的数据集的值必须为ASCII字符。

2、post方法

如果采用 post 方法，浏览器将首先与 action 属性中指定的表单处理服务器建立联系，一旦建立联系之后，浏览器就会按分段传输的方法将数据发送给服务器。与 get 方法不同的是， post 支持整个ISO10646字符集。

输入

输入<input>是一个单标签，必须嵌套在表单标签中使用，用于定义一个用户的输入项。

<form>
    <input name="" type="">
</form>

name属性的参数值是相应程序中的变量名。Web服务器将把这条输入信息的值赋予name属性规定的变量。type属性用于指定该输入项提供的输入方式，即指出用户输入的值的类型。在不同的输入方式下，<input>标签的格式略有不同，除了type之外的其他5种属性因type类型的不同而含义不同。

单行文本输入框

当type="text"时，表示该输入项的输入信息是字符串。此时，浏览器会在相应的位置显示一个文本框供用户输入信息。

<form>
    <input name="text" type="text" maxlength="" value="">
</form>

text文本框是一个只能输入一行文字的输入框。

（1）maxlength：设置单行输入框可以输入的最大字符数；

（2）size：设置单行输入框可以显示的最大字符数，这个值总是小于等于 maxlength 属性的值，当输入的字符数超过文本框的长度时，用户可以通过移动光标来查看超过的内容；

（3）value：文本框的值，可以通过设置value属性的值来指定当表单首次被载入时显示在输入框中的值；

（4）如果需要创建一个随着表单提交一同传递的元素，希望用户看到，却又不允许编辑，可以添加一个readonly属性。

另外通过<label><input></label>标签可以让鼠标点击前面文字而到输入框里面。

提交按钮和重置按钮

<form><input name="submit" type="submit" value="提交"></form>

<form><input name="submit" type="reset" value="重置"></form>

其中name是可以默认的，value用于显示在按钮上的值。

<form action="process.aspx" method="get">
    请输入你的姓名：<input type="text" name="yourname">
    <input type="submit" name="submit" value="submit">
    <input type="reset" name="reset" value="reset">
</form>

密码输入框

<input type="password" name="password" maxlength="" size="">

除 type 属性以外，其他属性和文本输入框一致。

<form action="process.aspx" method="get">
    请输入你的姓名：<input type="text" name="yourname"><br>
    请输入你的密码：<input type="password" name="password" maxlength="12" size="8"><br>
    <input type="submit" name="submit" value="submit">
    <input type="reset" name="reset" value="reset">
</form>

复选框

<input type="checkbox" name="" value="" checked>

由于选项可以很多，属性 name 应该取不同的值。属性 value 是用于提交给服务器的数据，所以其参数值必须与选项内容相同或基本相同，也可以在逻辑上有联系。 checked 属性用于默认选择。

<form action="process.aspx" method="get">
    四大名著有以下几本：<br>
    <input type="checkbox" name="三国演义" value="三国演义" checked>《三国演义》<br>
    <input type="checkbox" name="红楼梦" value="红楼梦">《红楼梦》<br>
    <input type="checkbox" name="水浒传" value="水浒传">《水浒传》<br>
    <input type="checkbox" name="老残游记" value="老残游记">《老残游记》<br>
    <input type="checkbox" name="西游记" value="西游记">《西游记》<br>
</form>

单选按钮

<input type="radio" name="radio" value="" checked>

所以属性的 name 都应取相同的值；不同的选项其 value 属性的值是不同的；checked 属性为默认勾选。

<form action="process.aspx" method="get">
    以下那本不是四大名著之一：<br>
    <input type="radio" name="radio" value="三国演义" checked="">《三国演义》<br>
    <input type="radio" name="radio" value="红楼梦">《红楼梦》<br>
    <input type="radio" name="radio" value="水浒传">《水浒传》<br>
    <input type="radio" name="radio" value="老残游记">《老残游记》<br>
    <input type="radio" name="radio" value="西游记">《西游记》<br>
</form>

图像按钮

<input type="image" name="image" scr="URL">

文本选择输入框

<form method="post" enctype="multipart/form-data">
    <input type="file" name="" size="">
</form>

把 type 属性设置成 file 就可以插入，在 标签中，我们必须把 method 属性设置成 post ，另外， enctype 属性确保文件采用正确的格式上传。

<form action="process.aspx" method="post" enctype="multipart/form-data">
    <p>
        请选择文件<br>
    <input type="file" name="uploadfile" size="40">
    </p>
    <div>
        <input type="submit" name="Send" value="上传">
    </div>
</form>

隐藏框

如果用户不想显示某些选项而又不愿意将它们从文档中删去，可能是应用程序需要的一些信息。把 type 属性设置成 hidden ，就不会在页面中显示了。

<form><input type="hidden" name="hidden" value=""></form>

多行文本输入框

<textarea></textarea>标签可以用来定义高度超过一行的文本输入框。

<textarea name="" cols="" rows="" wrap="">初始的文本内容</textarea>

（1）name指定文本框的名字；

（2）rows设置多行文本输入框的行数，浏览器会自动为高度超过一行的文本输入框添加垂直滚动条；

（3）cols设置多行文本输入框的列数；

（4）wrap设置自动换行：

wrap="virtual"仅仅是显示上的换行，而在实际的传输过程中仍然以回车键为准；

wrap="physical"不仅仅在显示上换行，还在实际的传输过程中以此换行为标准；

wrap="off"不会自动换行，且在内容超过文本域右边界时，文本将向左滚动，必须按下回车键才会换行。

<form action="process.aspx" method="post">
    <p>简介：</p>
    <textarea name="简介" cols="50" rows="10" wrap="virtual">内容</textarea><br>
    <input type="submit" name="submit" value="提交">
    <input type="reset" name="reset" value="重置">
</form>

下拉列表框

<form>
    <select name="" size="">
        <option></option>
        ......
        <option></option>
    </select>
</form>

（1）<select>是一个成对标签，它其中用<option>标签来定义各个选项内容。

name设定下拉列表名字；

size可选项，设置在列表中选项的数目。如果实际数量大于size属性的数值， 浏览器会为该下拉列表框添加滚动条，且size默认为1；

multiple是否允许用户多选。

（2）option是双标签，用来定义下拉列表框中的众多选项。

value发送给服务器的信息

selected是否默认选择

<form>
    <p>你最喜欢的运动：</p>
    <select name="sport">
        <option value="足球">足球</option>
        <option value="篮球">篮球</option>
        <option value="高尔夫">高尔夫</option>
    </select>
</form>

新增输入元素

1. email类型
   
   用于包含e-mail地址的输入域，在提交表单时会自动验证email域的值，不用使用带有正则表达式的脚本来验证输入域的值。根据浏览器的不同，email格式错误将会弹出不同的提示信息。
   
   <input type='email' name='userEmail'/>
2. url类型
   
   要求用户必须输入scheme://host.domain:post/path/filename的url地址，否则会报错。
   
   <input type='url' name='userUrl'>
3. number类型

属性	值	描述
max	number	指定数值最大值
min	number	指定数值最小值
step	number	指定步长（数值间隔），默认步长为1
value	number	指定默认值

<input type='number' min='' max='' step='' name='userNumber'/>

4. range类型

range类型用于确定包含一定范围内数字值的输入域，和number类型一致，并且属性相同。

<input type='range' min='' max='' step='' name='userRange'/>

5. color类型

color类型用于弹出颜色选择器

<input type='color' name='userColor'>

6. Date Picker类型

用于弹出日期选择器

<input type='data' name='userDate'>

支持以下的输入类型：

- date:选取日、月、年

- month:选取月、年

- week:选取周和年

- time:选取时间（小时和分钟）

- datetime:选取时间、日、月、年（UTC时间）

- datetime-local:选取时间、日、月、年（本地时间）

7. search类型

search类型用于搜索域，例如站点搜索或

新增其他元素

datalist类型

该元素功能是辅助表单文本框的内容输入，用于生成隐藏的可选下拉菜单，相当于一个select元素。datalist下拉菜单包含的选项使用option标签产生。显示文本是<option>的label属性值，而应该显示文本的实际参数值为value属性值。另外，datalist元素需要与某文本框结合使用，其结合方式是通过将文本框的list属性值设置为datalist的id值，这样就完成两者的绑定：

<!DOCTYPE html>
<html>
<head>
    <title>实例</title>
</head>
<body>
    <input type="text" list="datalist" name="cname"/>
    <datalist id="datalist">
        <option label="北京" value="北京">北京</option>
        <option label="南京" value="南京">南京</option>
        <option label="成都" value="成都">成都</option>
    </datalist>
</body>
</html>

属性	描述
autocomplete	表单或文本框的自动完成功能
autofocus	页面加载时自动获得焦点
form	所属表单id
formaction	重写表单action属性
formentype	重写表单entype属性
formmethod	重写表单method属性
formnovalidate	重写表单novalidate属性
formtarget	重写表单target属性
list	新增表单元素datalist的属性，规定了下拉菜单列表
min,max,step	部分新增imput类型元素的属性，最大、最小以及步长
multiple	规定输入域可选择多个
pattern	验证输入域的模式（正则表达式）
placeholder	输入域的提示文本，描述了当前输入域所期待的值
required	输入域必填项，不能为空