你的位置:首页 > 网页设计

[网页设计]HTML 表单和表格


1、使用表单标签

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

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

 

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

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

  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、文本框

  当用户要在表单中键入字母、数字等内容时,就会用到文本输入框,文本框也可以转化为密码输入框。输入域通过 <input> 标签完成,该标签规定了用户可以在其中输入数据的输入字段。输入字段可通过多种方式改变,取决于 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>

  <input> 标签用于定义输入域,而 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 属性对于 <input type="checkbox"> 和 <input type="radio"> 是必需的,不适用于 <input type="file">。

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

  <label> 标签则为 input 元素定义标记,一般为输入标题。<label> 标签不会向用户呈现任何特殊效果,它的作用是为鼠标用户改进了可用性。如果你在该标签内点击文本,就会触发此控件。就是说,当用户单击选中该 <label> 标签时,浏览器就会自动将焦点转到和标签相关的表单控件上(就自动选中和该 <label> 标签相关连的表单控件上)。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、文本域

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

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

 

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

 

4、选择框

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

  (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 属性规定在页面加载时应该被预先选定的 <input> 元素。该属性只适用于 <input type="radio"> 和 <input type="checkbox">。checked 属性用于设置默认选项,即该选项会被默认选中。该属性也可以在页面加载后,通过 JavaScript 代码进行设置。

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

 

5、下拉列表框

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

  (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>

 

  <select> 标签定义下拉列表选项,而 <option> 标签定义下拉列表中的选项。

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

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

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

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

 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>

 

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

 

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

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

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

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

  以下是 HTML5 中的新属性:

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

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

  pattern 属性规定用于验证 <input> 元素的值的正则表达式。可以使用使用全局的 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 规定 <input>元素的宽度/高度。

 

  (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 type="file">。该属性规定了可通过文件上传提交的服务器接受的文件类型。如需要多个文件类型,每个值可以使用逗号分隔。注意:不要将该属性作为验证工具,应该在服务器上对文件上传进行验证。

 

以下都是 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 属性可用于规定 <input> 元素的最小/最大值。value 属性可规定默认值。step 属性可规定 <input> 元素的合法数字间隔。实例:如果 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> 标签定义围绕表单中元素的边框。<legend>标签用于定义 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)、<datalist>

  <datalist> 标签规定了 input 元素可能的选项列表。如下:

 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>

 

  <datalist> 标签被用来为 <input> 元素提供"自动完成"的特性。用户能看到一个下拉列表,里边的选项是预先定义好的,将作为用户的输入数据。注意:必需使用 <input> 元素的 list 属性来绑定 <datalist> 元素。该属性引用 <datalist> 元素,其中包含 <input> 元素的预定义选项,该属性值为绑定到 <input> 元素的 datalist 的 id。

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

 

  (3)、<output>

  <output> 标签作为计算结果输出显示,比如执行脚本的输出。如下:

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)、<keygen>

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

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 密钥强度可由用户选择。注意:不同的浏览器对密钥生成算法的支持会有所变化。

 

9、HTML 表格

  创建表格的四个元素:table、tr、th、td

  <table>…</table>:整个表格以 <table> 标记开始,以 </table> 标记结束。

  <tr>…</tr>:表格的一行,所以有几对 tr 表格就有几行。

  <th>…</th>:表格的头部的一个单元格,表格表头。

  <td>…</td>:表格的一个单元格,一行中包含几对 <td>...</td>,说明一行中就有几列。表格中列的个数,取决于一行中数据单元格的个数。

  基本语法:

 1 <table border="1"> 2   <tr> 3     <th>姓名</th> 4     <th>性别</th> 5     <th>工号</th> 6   </tr> 7   <tr> 8     <td>小白</td> 9     <td>男</td>10     <td>123</td>11   </tr>12   <tr>13     <td>初夏</td>14     <td>女</td>15     <td>321</td>16   </tr>17 </table>

 

  此外,还有几个相当重要的表格标签,用于优化和组合表格元素:caption、thead、tbody、tfoot

  <caption>…</caption>:定义表格的标题,该标签必须放置在 <table> 元素之后,作为第一个子元素,并且一个表格只能定义一个标题。通常这个标题居中于表格之上,可以通过 CSS 属性 "text-align" 和 "caption-side" 来设置标题的对齐方式和显示位置。

  <thead>…</thead>:用于组合 HTML 表格的表头内容。该元素必须作为 <table> 元素的子元素,并且出现在 <caption>、<colgroup> 元素之后,<tbody>、 <tfoot> 和 <tr> 元素之前。

  <tbody>…</tbody>:用于组合 HTML 表格的主体内容。当表格内容非常多时,表格会下载一点显示一点,但如果加上 <tbody> 标签后,这个表格就要等表格内容全部下载完才会显示。该元素必须作为 <table> 元素的子元素,出现在 <caption>、<colgroup> 和 <thead> 元素之后。

  <thead>…</thead>:用于组合 HTML 表格的页脚内容。该元素必须作为 <table> 元素的子元素,出现在 <caption>、<colgroup> 和 <thead> 元素之后,<tbody> 和 <tr> 元素之前。

  注意: