HTML 表单_html/css_WEB-ITnose

1、使用表单标签

　　网站使用 HTML 表单可与用户进行交互，表单元素是允许用户在表单中输入内容，比如：文本框、文本域、单选框、复选框、下拉列表、按钮等等，表单可以把浏览者输入的数据传送到服务器端，这样服务器端程序就可以处理表单传过来的数据。表单使用表单标签

来定义：

<form method="传送方式" action="表单提交地址" name="表单名称"></form>

 

　　注意： 是一对闭合标签，成对出现。method 属性规定数据传送的方式（get/post）。action 属性规定当提交表单时用户输入的数据被传送向何处，比如一个 PHP 页面(demo.php)。name 属性可设置表单的名称。所有的表单控件都必须放在标签之间，否则用户输入的信息提交不到服务器上。

　　accept-charset 属性规定服务器可处理的表单数据字符集。默认值是保留字符串 "UNKNOWN"，表示编码为包含

元素的文档的编码。

　　enctype 属性规定在将表单数据发送到服务器之前如何对其进行编码。注意：只有 method="post" 时才使用 enctype 属性。

　　下面是2个新属性：

　　autocomplete 属性规定表单是否应该启用自动完成功能。自动完成允许浏览器预测对字段的输入。当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。注意：autocomplete 属性 "on" 适用于表单，"off" 适用于特定的输入字段，反之亦然。默认值为 on 规定启用自动完成功能。浏览器会基于用户之前键入的值自动完成值。off 则规定禁用自动完成功能。用户必须在每次使用时输入值到每个字段中，浏览器不会自动完成输入。

　　novalidate 属性规定当提交表单时不对表单数据进行验证。

　　From 中的 Get 和 Post 方法：

　　(1)、Get 方式将表单中数据的按照 var=value 的形式，添加到 action 所指向的 URL 后面，并且两者使用“?”连接，而各个变量之间使用“&”连接；而 Post 方式是将表单中的数据放在 form 的数据体中，按照变量和值相对应的方式，传递到 action 所指向的 URL。如下 Get 方式传送：

http://www.abc.com/demo.php?name=小白&password=12345678

 　　(2)、Get 方式是不安全的，因为在传输过程，数据被存放在请求的 URL 地址中，这样容易造成信息泄漏。

　　(3)、Get 方式传输的数据量非常小，一般限制在 2KB 左右，但是执行效率却比 Post 方法好；而 Post 方式传递的数据量相对较大，它是等待服务器来读取数据，不过也有字节限制，这是为了避免对服务器用大量数据进行恶意攻击，因此建议尽量使用 Post 方法传送数据，比如用户注册，使用 Get 方法请求数据，比如浏览贴子。

 

2、文本框

　　当用户要在表单中键入字母、数字等内容时，就会用到文本输入框，文本框也可以转化为密码输入框。输入域通过 标签完成，该标签规定了用户可以在其中输入数据的输入字段。输入字段可通过多种方式改变，取决于 type 属性。如下：

1 <form method="post" action="demo.php">2     <label for="name">用户名:</label>3     <input type="text" name="username" id="name" value="小白"><br/>4     <label for="pass">密　码:</label>5     <input type="password" name="password" id="pass" placeholder="请输入密码">6 </form>

　　 标签用于定义输入域，而 type 属性规定了要显示的输入域的内容，type="text" 为默认值，定义一个单行的文本字段输入，默认显示宽度为 20 个字符。 name 属性为文本框命名，以备后台程序调用。type="password" 定义密码字段，密码字段字符不会明文显示，而是以星号或圆点替代。

　　value 属性可为文本框设置默认值，一般起到提示的作用，value 属性对于不同 input 类型，用法也不同：

　　(1)、对于 "text"、"password"、"hidden" 类型，定义输入字段的初始（默认）值。

　　(2)、对于 "button"、"submit"、"reset"、类型，定义按钮上的文本。

　　(3)、对于 "checkbox"、"radio"、"image" 类型，则定义与 input 元素相关的值，当提交表单时该值会发送到表单的 action URL。

　　注意：value 属性对于 和 是必需的，不适用于 。

　　而 placeholder 属性则可规定输入字段预期值的简短的提示信息，比如一个样本值或者预期格式的短描述，该提示会在用户输入值之前显示在输入字段中，该值显示为虚体，颜色浅，当用户输入时自动清除，而用于  的 value 属性的默认值显示为实体，而且颜色深，在用户输入时需要自行清除。placeholder 属性适用于下面的 input 类型：text、search、url、tel、email 和 password。

　　 标签则为 input 元素定义标记，一般为输入标题。 标签不会向用户呈现任何特殊效果，它的作用是为鼠标用户改进了可用性。如果你在该标签内点击文本，就会触发此控件。就是说，当用户单击选中该  标签时，浏览器就会自动将焦点转到和标签相关的表单控件上（就自动选中和该 标签相关连的表单控件上）。for 属性规定 label 与哪个表单元素绑定，该属性的值应当与绑定元素的 id 属性值相同。如下：

1 <form method="post" action="demo.php">2     <label for="male">男</label>3     <input type="radio" id="male" name="gender"><br/>4     <label for="female">女</label>5     <input type="radio" id="female" name="gender"><br/>6     <label for="email">邮箱</label>7     <input type="email" id="email" placeholder="请输入邮箱地址">8 </form>

 

3、文本域

　　文本域是一个多行的文本输入控件，当用户需要在表单中输入大段文字时，需要用到文本输入域。文本域通过 标签完成，如下：

1 <form method="post" action="demo.php">2     <label for="txt">发表意见：</label><br/>3     <textarea cols="50" rows="10" id="txt">在这里输入内容...</textarea>4 </form>

 

　　注意： 标签是一对闭合标签，成对出现，在开始标签和结束标签之间可以输入默认值，cols 和 rows 属性则定义文本域的行数和列数，更好的办法是使用 CSS 的 width 和 height 属性来定义文本与的大小，width 代替 cols，height 代替 rows。

 

4、选择框

　　选择框可以让用户做出选择，在使用表单设计调查表时，为了减少用户的操作，使用选择框是一个好主意，HTML 中有两种选择框，即单选框和复选框，两者的区别是单选框中的选项用户只能选择一项，而复选框中用户可以任意选择多项，甚至全选。定义选择框通过 标签完成，不同的是输入类型。

　　(1)、单选框

　　type="radio" 定义了单选框，也叫单选按钮，允许用户在一定数量的选择中选取一个选项。如下：

1 <form method="post" action="demo.php">2     <label for="love">喜　欢</label>3     <input type="radio" id="love" name="like" value="喜欢" checked><br/>4     <label for="noLove">不喜欢</label>5     <input type="radio" id="noLove" name="like" value="不喜欢"><br/>6     <label for="casual">无所谓</label>7     <input type="radio" id="casual" name="like" value="无所谓"><br/>8 </form>

 

　　(2)、复选框

　　type="checkbox" 定义了复选框，允许用户可以选择多个选项。如下：

 1 <form method="post" action="demo.php"> 2     <label for="tool1">自行车</label> 3     <input type="checkbox" id="tool1" name="bike" value="自行车"><br/> 4     <label for="tool2">汽　车</label> 5     <input type="checkbox" id="tool2" name="car" value="汽车"><br/> 6     <label for="tool3">飞　机</label> 7     <input type="checkbox" id="tool3" name="plane" value="飞机" checked><br/> 8     <label for="tool4">火　箭</label> 9     <input type="checkbox" id="tool4" name="rocket" value="火箭" checked><br/>10     <label for="tool5">毛　线</label>11     <input type="checkbox" id="tool5" name="wool" value="毛线">12 </form>

 

　　value 属性值是必需的，为提交数据到服务器的值，供后台程序使用。name 属性为输入控件命名，供后台程序使用，checked 属性规定在页面加载时应该被预先选定的 元素。该属性只适用于 和 。checked 属性用于设置默认选项，即该选项会被默认选中。该属性也可以在页面加载后，通过 JavaScript 代码进行设置。

　　注意：同一组的单选按钮，name 属性取值一定要一致，比如上面例子为同一个名称“like”，这样同一组的单选按钮才可以起到单选的作用。同一组的复选框，name 属性取值可以一致，这样方便为其定义样式，或者通过 JS 获取元素。

 

5、下拉列表框

　　下拉列表在网页中也常会用到，它可以有效的节省网页空间。既可以单选、也可以多选。下拉列表框通过 标签 和 标签完成。

　　(1)、下拉列表单选框

 1 <form method="post" action="demo.php"> 2     <label for="like">喜欢：</label> 3     <select id="like" name="cars"> 4         <option value="奥迪">奥迪</option> 5         <option value="宝马">宝马</option> 6         <option value="奔驰">奔驰</option> 7         <option value="宾利">宾利</option> 8         <option value="路虎">路虎</option> 9     </select>10 </form>

 

　　(2)、下拉列表复选框

 1 <form method="post" action="demo.php"> 2     <label for="like">喜欢：</label> 3     <select id="like" name="cars" multiple> 4         <option value="奥迪">奥迪</option> 5         <option value="宝马">宝马</option> 6         <option value="奔驰">奔驰</option> 7         <option value="宾利">宾利</option> 8         <option value="路虎" selected>路虎</option> 9     </select>10 </form>

 

　　 标签定义下拉列表选项，而 标签定义下拉列表中的选项。

　　下拉列表单选框和下拉列表复选框，唯一的不同就是复选框使用了 multiple 属性实现了多选功能，下拉列表可以进行多选操作就是在  标签中设置了 multiple 属性，该属性用于规定可同时选择多个选项，需要注意：下拉列表框根据选项的个数(单选/复选)，会在网页上呈现不同的显示效果。在不同的操作系统，选择多个选项的方法也不同，在 windows 操作系统下，需要按住 Ctrl 键来选择多个选项，而在 Mac 系统下，需要按住 Command 键来选择多个选项。

　　 标签的 value 属性值为向服务器提交的值，selected 属性则表示该选项被默认选中，即首次在列表中时表现为选中状态。该标签需要与  标签配合使用，否则这个标签是没有任何意义的。

　　 元素是一种表单控件，可用于在表单中接受用户输入。还元素有几个重要属性，required 属性规定用户在提交表单前必须选择一个下拉列表中的选项。autofocus 属性规定在页面加载时下拉列表自动获得焦点。size 属性规定下拉列表中可见选项的数目。由于各属性之间的差异，需要告诉用户是否可以多项选择，对用户更友好的方式是使用复选框。

　　如果有很多的选项组合，就可以使用 标签能够很简单的将相关选项组合在一起。该标签经常用于把相关的选项组合在一起。如下：

 1 <form method="post" action="demo.php"> 2     <label for="like">喜欢：</label> 3     <select> 4         <optgroup label="国产"> 5             <option value="奇瑞">奇瑞</option> 6             <option value="大众">大众</option> 7             <option value="现代">现代</option> 8             <option value="哈弗">哈弗</option> 9             <option value="比亚迪">比亚迪</option>10         </optgroup>11         <optgroup label="进口">12             <option value="兰博基尼">兰博基尼</option>13             <option value="雷克萨斯">雷克萨斯</option>14             <option value="凯迪拉克">凯迪拉克</option>15             <option value="玛莎拉蒂">玛莎拉蒂</option>16             <option value="英菲尼迪">英菲尼迪</option>17         </optgroup>18     </select>19 </form>

 

　　 标签一个重要属性 label 用于为选项组规定描述。

 

6、按钮

　　在表单中有两种按钮可以使用，分别为：提交按钮和重置按钮。还有一种按钮叫做点击按钮。

　　(1)、点击按钮

　　type="button" 定义一个可点击的按钮，在用户点击按钮时启动一段 JavaScript。

1 <input type="button" value="按钮" onclick="show()">2 <script>3 function show(){4     alert("Hello world!");5 }6 </script>

 

　　(2)、提交按钮

　　当用户需要提交表单信息到服务器时，需要用到提交按钮。type="submit" 用于定义提交按钮。

1 <form method="post" action="demo.php">2     <label for="urse">用户名：</label>3     <input type="text" id="urse" name="ursename" placeholder="邮箱/手机号/用户名"/><br/>4     <label for="password">密　码：</label>5     <input type="password" id="password" name="pass" placeholder="请输入密码" /><br/>6     <input type="submit" value="提交信息">7 </form>

 

　　button 和 submit 都是定义一个按钮，不同的是 button 只是一个普通的按钮，主要用于绑定事件，如果不给其绑定事件，那么点击按钮不会有任何反应。而 submit 则是提交按钮，主要用于提交表单，传送数据，如果给 submit 绑定事件，那么点击按钮触发事件的同时，也会提交表单。

　　(3)、重置按钮

　　当用户需要重置表单信息到初始时的状态时，比如用户输入信息后，发现输入错误，那么可以使用重置按钮使输入框恢复到初始状态。只需要把 type 设置为 "reset" 就可以。

1 <form method="post" action="demo.php">2     <label for="urse">用户名：</label>3     <input type="text" id="urse" name="ursename" placeholder="邮箱/手机号/用户名"/><br/>4     <label for="password">密　码：</label>5     <input type="password" id="password" name="pass" placeholder="请输入密码" /><br/>6     <input type="submit" value="提交信息">7     <input type="reset" value="重置信息">8 </form>

　　type="reset" 用于定义一个重置按钮，需要谨慎使用该按钮，当用户点击重置按钮后，所有表单值都会恢复到默认值，这对于用户来说，如果不慎点击了重置按钮将是一件十分令人恼火的事。

　　在 HTML 中还有一种创建按钮的方法就是使用  标签。该元素与使用 元素创建的按钮之间的不同之处就在于：使用 button 元素创建的按钮，在该元素内部可以放入内容，比如文本或图像，也就是该元素可以使用多媒体内容， 与 标签之间的所有内容都是按钮的内容。该元素也可以定义点击按钮、提交按钮和重置按钮。但是他的缺点就是：不同的浏览器对 元素的 type 属性使用不同的默认值，因此要始终为  元素规定 type 属性，不同浏览器可能会提交不同的按钮值，也就是浏览器得到的 value 值不同，存在兼容性问题。所以要使用 元素在 HTML 表单中创建按钮。

 

7、input 元素属性和其他输入类型

　　除了前边提到的一些属性外，input 元素还有一些重要属性，以及 HTML5 新增加的属性。

　　readonly 属性规定输入字段是只读的。该属性是一个布尔值。只读字段是不能修改的。不过，用户仍然可以使用 tab 键切换到该字段，还可以选中或拷贝其文本。readonly 属性可以防止用户对值进行修改，直到满足某些条件为止，比如选中了一个复选框。然后，需要使用 JavaScript 消除 readonly 值，将输入字段切换到可编辑状态。

　　size 属性规定以字符数计的 元素的可见宽度。size 属性适用于下面的 input 类型：text、search、tel、url、email 和 password。如需规定 元素中允许的最大字符数，需要使用 maxlength 属性。

　　以下是 HTML5 中的新属性：

　　autocomplete="on|off" 属性规定输入字段是否应该启用自动完成功能。默认值为 on，规定用户启用自动完成功能，off 则表示禁用。注意：autocomplete 属性适用于下面的 类型：text、search、url、tel、email、password、date pickers(日期选择器)、range 和 color。

　　multiple 属性规定允许用户输入到 元素的多个值。该值是一个布尔值，注意：multiple 属性适用于以下 input 类型：email 和 file。

　　pattern 属性规定用于验证 元素的值的正则表达式。可以使用使用全局的 title 属性来描述模式以帮助用户。pattern 属性适用于下面的 input 类型：text、search、url、tel、email 和 password。

　　required 属性规定必需在提交表单之前填写输入字段。该属性是一个布尔值，required 属性适用于下面的 input 类型：text、search、url、tel、email、password、date pickers、number、checkbox、radio 和 file。

 

　　下面是 input 元素的其他输入类型：

　　(1)、图像作为按钮

　　type="image" 用于定义图像作为提交按钮，如下：

<input type="image" src="imges/submit.gif" alt="Submit" width="48" height="48">

　　上面代码中的 3 个属性都只针对 type="image"，src 属性规定显示为提交按钮的图像的 URL。alt 属性定义图像输入的替代文本。width 和 height 规定 元素的宽度/高度。

 

　　(2)、隐藏字段

　　type="hidden" 用于定义隐藏字段，隐藏字段对于用户是不可见的。隐藏字段常常存储默认值，或者由 JavaScript 改变它们的值。

1 <form method="post" action="demo.php">2     姓名: <input type="text" name="user"><br/>3     <input type="hidden" name="country" value="China">4     <input type="submit" value="提交">5 </form>

 

　　(3)、选择文件

　　type="file" 用于定义文件选择字段和 "浏览..." 按钮，供文件上传。

1 <form method="post" action="demo.php">2     选择一个文件: <input type="file" name="img" accept="image/*,audio/*,video/*"><br/>3     <input type="submit" value="提交">4 </form>

　　accept 属性仅适用于 。该属性规定了可通过文件上传提交的服务器接受的文件类型。如需要多个文件类型，每个值可以使用逗号分隔。注意：不要将该属性作为验证工具，应该在服务器上对文件上传进行验证。

 

以下都是 input 元素在 HTML5 中的新类型：

　　(4)、Email

　　type="email" 用于定义邮箱地址的字段，当提交表单时会自动对 email 字段的值进行验证。

Email: <input type="email" name="usre">

 

　　(5)、电话号码

　　type="tel" 用于定义用于输入电话号码的字段。

电话号码: <input type="tel" name="mobile">

 

　　(6)、拾色器

　　type="color" 用于定义从拾色器中选取颜色。

选择你喜欢的颜色: <input type="color" name="likecol">

 

　　(7)、搜索字段

　　type="search" 定义用于输入搜索字符串的文本字段，比如站内搜索。

查查看: <input type="search" name="lookup">

　　目前，浏览器对于该类型的支持不是很好。

 

　　(8)、URL

　　type="url" 定义用于输入 URL 的字段。

添加你的主页: <input type="url" name="homepage">

 

　　(9)、数字字段

　　type="number" 定义用于输入数字的字段，可以设置可接受数字的限制。

数量 ( 1 到 5 之间): <input type="number" name="num" min="1" max="5">

　　min 和 max 属性可用于规定 元素的最小/最大值。value 属性可规定默认值。step 属性可规定  元素的合法数字间隔。实例：如果 step="3"，则合法数字应该是 -3、0、3、6，以此类推。该属性可以与 min 和 max 属性配合使用，以创建合法值的范围。

 

　　type="range" 定义用于精确值不重要的输入数字的控件，比如 Slider.js，一个轻量级图片播放控件。也可以设置可接受数字的限制。用来规定限制的属性同 number 类型相同。

 

　　(10)、日期

　　type="time" 定义用于输入时间的控件（不带时区）。

　　type="date"  定义 date 控件。

　　type="datetime" 定义 date 和 time 控件（带有时区）。

　　type="datetime-local" 定义 date 和 time 控件（不带时区）。

　　type="month" 定义 month 和 year 控件（不带时区）。

　　type="week" 定义 week 和 year 控件（不带时区）。

 

8、其他表单标签

　　(1)、表单边框

　　

标签定义围绕表单中元素的边框。

标签用于定义 fieldset 元素的标题。

1 <form method="post" action="demo.php">2     <fieldset>3         <legend>个人信息:</legend>4         姓名: <input type="text"><br/>5         籍贯: <input type="text"><br/>6         邮箱: <input type="email"><br/>7         家庭住址: <input type="text">8     </fieldset>9 </form>

 

在 HTML5 中还增加了3个新标签：

　　(2)、

　　如下：

 1 <form method="post" action="demo.php"> 2     <input list="browser" name="explorer" autofocus> 3     <datalist id="browser"> 4         <option value="IE"> 5         <option value="Firefox"> 6         <option value="Chrome"> 7         <option value="Safari"> 8         <option value="Opera"> 9     </datalist>10     <input type="submit">11 </form>

 

　　

　　autofocus 属性用于规定当页面加载时 元素应该自动获得焦点。

 

　　(3)、

　　

标签作为计算结果输出显示，比如执行脚本的输出。

如下：

1 <form method="post" action="demo.php" oninput="sum.value=parseInt(x.value)+parseInt(y.value)">2     0<input type="range" id="x" value="50">1003     +<input type="number" id="y" value="50">=4     <output name="sum" for="x y"></output>5 </form>

 

　　该标签有一个重要属性 for 规定一个或多个元素的 id 列表，以空格分隔，用于描述计算中使用的元素与计算结果之间的关系。name 属性定义对象的唯一名称，在表单提交时使用。

 

　　(4)、

　　 规定用于表单的密钥对生成器字段。当提交表单时，私钥存储在本地，公钥发送到服务器。如下：

1 <form method="post" action="demo.php">2     用户名: <input type="text" name="usre"><br/>3     加　密: <keygen name="security" keytype="rsa">4     <input type="submit">5 </form>

 

　　该标签有一个重要属性 keytype 用于定义密钥的安全算法，该属性规定应该使用哪种密钥生成算法，安全算法有3种：rsa为默认，规定 RSA 安全算法，RSA 密钥强度可由用户选择。dsa 规定 DSA 安全算法，DSA 密钥长度可由用户选择。ec 规定 EC 安全算法，EC 密钥强度可由用户选择。注意：不同的浏览器对密钥生成算法的支持会有所变化。