![HTML+CSS+JavaScript网页制作(第2版)](https://wfqqreader-1252317822.image.myqcloud.com/cover/883/33892883/b_33892883.jpg)
3.3 表单元素
在上一章的块级标签中,已经讲解了表单的工作原理和表单标签的基本语法,本节将讲解表单元素的基本用法。表单中通常包含一个或多个表单元素,常见的表单元素见表3-1。
表3-1 常见的表单元素
![](https://epubservercos.yuewen.com/0A8069/18123624408030006/epubprivate/OEBPS/Images/47_03.jpg?sign=1734502214-lVYokxkkiZRDhTYeVPBKlIVv90jN0urR-0-2157be8a59175312a5ca562ac2e6aae0)
例如,常见的网上问卷调查表单,其中包含的表单元素如图3-11所示。
![](https://epubservercos.yuewen.com/0A8069/18123624408030006/epubprivate/OEBPS/Images/48_01.jpg?sign=1734502214-Yq4cLD7PjkxCIykdJFA3laCBu6SYWzl3-0-cd9dd81b6bd59c7a0396304e3590ee0e)
图3-11 常见的表单元素
3.3.1 <input>元素
<input>元素用来定义用户输入数据的输入字段,根据不同的type属性,输入字段可以是文本字段、密码字段、复选框、单选按钮、按钮、隐藏域、图像、文件等。<input>元素的基本格式为:
![](https://epubservercos.yuewen.com/0A8069/18123624408030006/epubprivate/OEBPS/Images/48_02.jpg?sign=1734502214-cUdHfQvp8eFyUSPs91Tvba824Qa2z60Q-0-e408d56800520c77aff444366bf3f83d)
<input>元素常用属性的含义如下。
type属性:指定要加入表单项目的类型(text,password,checkbox,radio,button,hidden,image,file,submit或reset等)。
name属性:该表项的控制名,主要在处理表单时起作用。
size属性:输入字段中的可见字符数。
maxlength属性:允许输入的最大字符数目。
checked属性:当页面加载时是否预先选择该input元素(适用于epub:type="checkbox"或type="radio")。
readonly属性:设置字段的值无法修改。
autofocus属性:设置输入字段在页面加载时是否获得焦点(不适用于type="hidden")。
disabled属性:当页面加载时是否禁用该input元素(不适用于type="hidden")。
1.文字框
使用<input>元素的type属性,可以在表单中加入表项,并控制表项的风格。如果type属性值为text,则定义的表单元素为文本框,输入的文本以标准的字符显示;在表项前应加入表项的名称,如“您的姓名”等,以告诉浏览者在随后的表项中应该输入的内容。文本框的格式为:
![](https://epubservercos.yuewen.com/0A8069/18123624408030006/epubprivate/OEBPS/Images/48_03.jpg?sign=1734502214-yyvZJzGt0grcs0CRf0mPH92sDSDkAmZC-0-2f6d86b533aee816f190fb118a795e2e)
例如,以下输入用户名的文本框的代码如下:
![](https://epubservercos.yuewen.com/0A8069/18123624408030006/epubprivate/OEBPS/Images/48_04.jpg?sign=1734502214-apGvsUzgsGjPSmD2BHgMZjB3bfwLn1Cc-0-96653aa9d3b2a1a7f64cd45435ebcd6c)
其中,type="text"表示<input>元素的类型为文本框,name="userName"表示文本框的名字为userName,size="18"表示文本框的宽度为18个字符,value="tom"表示文本框中初始显示的内容为“肥猫”,页面中的效果如图3-12所示。
2.密码框
将<input>元素type属性值为password,则定义的表单元素为密码框,输入的文本显示为“*”。密码框的格式为:
![](https://epubservercos.yuewen.com/0A8069/18123624408030006/epubprivate/OEBPS/Images/49_01.jpg?sign=1734502214-xnnYkeJzyUugad6eR1nF09ORPineg7Iv-0-22a59b7646ba24af188e8cdcbede3220)
例如,以下输入用户名的文本框的代码如下:
![](https://epubservercos.yuewen.com/0A8069/18123624408030006/epubprivate/OEBPS/Images/49_02.jpg?sign=1734502214-XRhDwoHdVlVYMBINIlecwfGmzS7jC3L0-0-05841541b537f896a8fe2908826a1a2b)
其中,type="password"表示<input>元素的类型为密码框,name="pass"表示密码框的名字为pass,size="18"表示密码框的宽度为18个字符,页面中的效果如图3-13所示。
![](https://epubservercos.yuewen.com/0A8069/18123624408030006/epubprivate/OEBPS/Images/49_03.jpg?sign=1734502214-A6f5tRECM1QYw1qxXp4EkhnxNbxZ3p1s-0-689719b54c4c5fff75d1de38b11690fe)
图3-12 文本框
![](https://epubservercos.yuewen.com/0A8069/18123624408030006/epubprivate/OEBPS/Images/49_04.jpg?sign=1734502214-MEXe3rBHWOGZR2Z6dthfNm96zSpOe1vq-0-a008b2bc0bc2f2436c7baa919d4833b7)
图3-13 密码框
3.按钮
表单中的按钮有4种类型,即重置按钮、提交按钮、普通按钮和图片按钮。
(1)重置按钮
如果浏览者想清除输入到表单中的全部内容,可以使用<input>元素中的type属性设置重置(reset)按钮,以省去在重新输入前,一项一项删除的麻烦。重置按钮的格式为:
![](https://epubservercos.yuewen.com/0A8069/18123624408030006/epubprivate/OEBPS/Images/49_05.jpg?sign=1734502214-lXuVbO7fa0akk8JEPHTC8LDU48IJ6Str-0-4e7feb51a99d1b0c27d0ff7b40b11f91)
当省略value的设置值时,重置按钮的默认显示为“重置”。
(2)提交按钮
当浏览者完成表单的填写,想要发送时,可使用<input>元素的type属性设置的提交(submit)按钮,将表单内容送给action属性中的网址或函件信箱。提交按钮的格式为:
![](https://epubservercos.yuewen.com/0A8069/18123624408030006/epubprivate/OEBPS/Images/49_06.jpg?sign=1734502214-rtqhjIJYPGudirhc5vWqwJvUkDPOhxSy-0-165797de0e1c629d621a344fd6d1c7ef)
当省略value的设置值时,提交按钮的默认显示为“提交”。
(3)普通按钮
如果浏览者想制作一个用于触发事件的普通按钮,可使用<input>元素的type属性设置普通(button)按钮。普通按钮的格式为:
![](https://epubservercos.yuewen.com/0A8069/18123624408030006/epubprivate/OEBPS/Images/49_07.jpg?sign=1734502214-O4jpeY82xQ37ZzAsWocI4TaBKvyImSA2-0-0c12f0861afbf51c3aaf07309c7e331f)
(4)图片按钮
如果浏览者想制作一个美观的图片按钮,可使用<input>元素的type属性设置图片(image)按钮。图片按钮的格式为:
![](https://epubservercos.yuewen.com/0A8069/18123624408030006/epubprivate/OEBPS/Images/49_08.jpg?sign=1734502214-NvKmlyn3KmQIDuWPzdILcIjku3lZPA04-0-252ec7a94a729d4f0c51771777013f49)
【演练3-7】制作不同类型的表单按钮,本例文件3-7.html在浏览器中显示的效果如图3-14所示。
![](https://epubservercos.yuewen.com/0A8069/18123624408030006/epubprivate/OEBPS/Images/49_09.jpg?sign=1734502214-SyAgXFYjliMkxBxYoq0DIqmObiUAHQ94-0-7b59f3b44cc0dc3e931913ada4e01cc2)
图3-14 不同类型的按钮
代码如下:
![](https://epubservercos.yuewen.com/0A8069/18123624408030006/epubprivate/OEBPS/Images/49_10.jpg?sign=1734502214-HD0NHrDWrYkU00PVbQOzx3r5nwR0LmL3-0-dd81609df98a0dd7be1b3d000ede6b96)
![](https://epubservercos.yuewen.com/0A8069/18123624408030006/epubprivate/OEBPS/Images/50_01.jpg?sign=1734502214-zpv2xJI8eyPOkaLuI2d2xbA4kS9E9k4j-0-e9194d8efa68d3c7c10545425c0e048b)
如果用户觉得上面的提交按钮不太美观,在实际应用中,可以用图片按钮代替,如图3-15所示。实现图片按钮最简单的方法就是配合使用type属性和src属性。例如,将上面定义“注册”提交按钮的代码修改如下:
![](https://epubservercos.yuewen.com/0A8069/18123624408030006/epubprivate/OEBPS/Images/50_03.jpg?sign=1734502214-21rrU0b0ljXgLbSxSaB9cUbLd0EEk8QI-0-073408af17cafddf62520c3f6f44a098)
![](https://epubservercos.yuewen.com/0A8069/18123624408030006/epubprivate/OEBPS/Images/50_02.jpg?sign=1734502214-P50mNRYrNvbUhoZXTPkyNA24kFVMaWvl-0-1d975d5d3850a8160df523e927d7d102)
图3-15 图片按钮
【说明】使用这种方法实现的图片按钮比较特殊,虽然type属性没有设置为“submit”,但仍然具有提交功能。
4.复选框
在页面中有些地方需要列出多个选项,浏览者可以通过复选框来选择其中的一项或多项。将<input>元素的type属性设置为“checkbox”,则定义的表单元素为复选框。复选框的格式为:
![](https://epubservercos.yuewen.com/0A8069/18123624408030006/epubprivate/OEBPS/Images/50_04.jpg?sign=1734502214-E4FGc8ya4T4rJxVOnfzxBzaxc9VAU80p-0-e97f2e07562defe9e7ea51f7b4df87de)
其中,value属性可设置复选框的提交值,用checked属性表示是否为默认选中项,name属性是复选框的名称,同一组的复选框的名称是一样的。
例如,以下选择“关注的最新橱柜”复选框的代码如下:
![](https://epubservercos.yuewen.com/0A8069/18123624408030006/epubprivate/OEBPS/Images/50_05.jpg?sign=1734502214-aoNeJc75tMUtqZuW35LVhafzDCBb5bJ9-0-00bcd32cced93054fa2384edea9a20b2)
其中,“不锈钢橱柜”和“实木橱柜”两个复选框设置了checked="checked"默认选中属性,页面浏览后,这两种橱柜名称前面的复选框自动勾选,如图3-16所示。
5.单选按钮
单选按钮用于一组相互排斥的选项,组中的每个选项应具有相同的名称,以确保浏览者只能选择一个选项。单选按钮的格式为:
![](https://epubservercos.yuewen.com/0A8069/18123624408030006/epubprivate/OEBPS/Images/51_01.jpg?sign=1734502214-8CIoVmvwsab1n6eWcJ31nCcxy1i0LX6A-0-2660681a3d53ecf1f8c0c28bf41b7e38)
其中,value属性可设置单选按钮的提交值,用checked属性表示是否为默认选中项,name属性是单选按钮的名称,同一组的单选按钮的名称是一样的。
例如,以下选择“最喜欢的橱柜类型”单选按钮的代码如下:
![](https://epubservercos.yuewen.com/0A8069/18123624408030006/epubprivate/OEBPS/Images/51_02.jpg?sign=1734502214-b6MUK6JmR7R5WEfph7te5WIFKWeKVEpg-0-1eeb514f554d11961e346beb64e2241c)
其中,类型为“欧式系列”的单选按钮设置了checked="checked"默认选中属性,页面浏览后,“欧式系列”的单选按钮自动选中,如图3-17所示。
![](https://epubservercos.yuewen.com/0A8069/18123624408030006/epubprivate/OEBPS/Images/51_03.jpg?sign=1734502214-6cI6dsKp97xzZ7FT8vt11dS4EY2wHJ1s-0-bf9b8b32d803f07a4de38aed21061c75)
图3-16 复选框
![](https://epubservercos.yuewen.com/0A8069/18123624408030006/epubprivate/OEBPS/Images/51_04.jpg?sign=1734502214-QyuLqN4VpqRAZ57W6UBBIqeOlMhysADA-0-7d75cf2c9f33d7820b24d631a9ac1e8c)
图3-17 单选按钮
6.隐藏域
网站服务器发送到客户端的信息,除用户直观看到的页面内容之外,可能还包含一些“隐藏”信息。例如,用户登录后的用户名、用于区别不同用户的用户ID等。这些信息对于用户可能没用,但对网站服务器有用,一般将这些信息“隐藏”起来,而不在页面中显示。
将<input>元素的type属性设置为hidden类型即可创建一个隐藏域。格式为:
![](https://epubservercos.yuewen.com/0A8069/18123624408030006/epubprivate/OEBPS/Images/51_05.jpg?sign=1734502214-zZ87rDiUcxleMytUErB8uA9TfgEKY7io-0-3112440812ce3f930b652aaac4b0e636)
例如,在登录页的表单中隐藏用户的ID信息“u01”,代码如下:
![](https://epubservercos.yuewen.com/0A8069/18123624408030006/epubprivate/OEBPS/Images/51_06.jpg?sign=1734502214-NVQC6BIOgpiuAfB2K4qTVQj1eK7DvI14-0-dfda16acc9c286bc6f4b6dffaea6f602)
页面浏览后,隐藏域信息并不显示,如图3-18所示,但能通过页面的HTML代码查看到。
![](https://epubservercos.yuewen.com/0A8069/18123624408030006/epubprivate/OEBPS/Images/51_07.jpg?sign=1734502214-XSLwRWbyuSCjqMbioBxZF7Ai1NA8frVO-0-332fd86eedf3c70583be6a8f1f08cd05)
图3-18 隐藏域并不显示
7.文件域
文件域用于上传文件,将<input>元素的type属性设置为file类型即可创建一个文件域。文件域会在页面中创建一个不能输入内容的地址文本框和一个“浏览”按钮。格式为:
![](https://epubservercos.yuewen.com/0A8069/18123624408030006/epubprivate/OEBPS/Images/51_08.jpg?sign=1734502214-KNT8MZ7NkD4SljS35LozK5t3H9biVXfu-0-b8b96d78756568eedd6991a923b301e2)
【演练3-8】制作上传橱柜图片的表单页面,使用文件域上传文件,用户单击“浏览”按钮后,将弹出“选择要加载的文件”对话框。选择文件后,路径将显示在地址文本框中,页面的显示效果如图3-19所示。
代码如下:
![](https://epubservercos.yuewen.com/0A8069/18123624408030006/epubprivate/OEBPS/Images/51_09.jpg?sign=1734502214-puvKCcJHlRxsknyvMSiOfsl6Kd5Ob3Ha-0-58295082aa8152256fd4fbf929ada731)
![](https://epubservercos.yuewen.com/0A8069/18123624408030006/epubprivate/OEBPS/Images/52_01.jpg?sign=1734502214-OkHDwTrOC70xwYdbowrX0ja7jgXG9VVX-0-cedbf2584b84159c058ad5e3c97d7fb6)
![](https://epubservercos.yuewen.com/0A8069/18123624408030006/epubprivate/OEBPS/Images/52_02.jpg?sign=1734502214-fiA0xKmBzb8Fb4nHyAglGTHkK35d5dk6-0-e42c3f81695cd342d28c22648ef6036c)
图3-19 页面的显示效果
【说明】需要注意的是,在设计包含文件域的表单时,由于提交的表单数据包括普通的表单数据和文件数据等多部分内容,所以必须设置表单的“enctype”编码属性为“multipart/form-data”,表示将表单数据分为多部分提交。
3.3.2 选择栏<select>
当浏览者选择的项目较多时,如果用单选按钮来选择,占页面的空间就会较大,这时可以用<select>标签和<option>标签来设置选择栏。
<select>标签的格式为:
![](https://epubservercos.yuewen.com/0A8069/18123624408030006/epubprivate/OEBPS/Images/52_03.jpg?sign=1734502214-ChDbAiHDXvbLWudoKdB5hcV2XNUUzDby-0-2e978a70b381c1f869e177c82dc694a9)
<select>标签各个属性的含义如下。
size:取数字,表示在带滚动条的下拉列表中一次可显示的列表项数,默认值为1。
name:控制操作名。
multiple:加上本项表示可选多个选项,否则只能单选。
<option>标签的格式为:
![](https://epubservercos.yuewen.com/0A8069/18123624408030006/epubprivate/OEBPS/Images/52_04.jpg?sign=1734502214-ozQOpHaclppBYbrAXh8LMn8HIMFdQKZ7-0-07d0336a6a1a63141dcb81dfba59f968)
<option>标签各个属性的含义如下。
selected:加上本项表示该项是默认选中的。
value:指定控制操作的初始值。若省略,则初值为option中的内容表示选项值。
选择栏有两种形式:字段式列表和下拉式菜单。二者的主要区别在于,前者在<select>中的size属性值取大于1的值,此值表示在选择栏中不拖动滚动条可以显示的选项的数目。
【演练3-9】制作“用户年龄”问卷调查的下拉菜单,页面加载时菜单显示的默认选项为“20--35岁”,用户可以单击菜单下拉箭头选择其余的选项。本例文件3-9.html在浏览器中显示的效果如图3-20所示。
![](https://epubservercos.yuewen.com/0A8069/18123624408030006/epubprivate/OEBPS/Images/53_01.jpg?sign=1734502214-tPVw6y4g8z8HUoFIYxbPVI2Pt7HuFbi4-0-c14c25e84dad4246f6adc7c3e478dbe1)
图3-20 页面的显示效果
代码如下:
![](https://epubservercos.yuewen.com/0A8069/18123624408030006/epubprivate/OEBPS/Images/53_02.jpg?sign=1734502214-LJ2TSOe3FmB2eSt4jcxrSvdfvsva5f37-0-74a0857cbbbe6a1046a7d00ea0e1c12c)
【说明】菜单中的选项“20--35岁”设置了selected="selected"属性值,因此,页面加载时显示的默认选项为“20--35岁”。
3.3.3 多行文本域<textarea>…</textarea>
在意见反馈栏中往往需要浏览者发表意见和建议,且提供的输入区域一般较大,可以输入较多的文字。使用<textarea>标签可以设置允许成段文字的输入,格式为:
![](https://epubservercos.yuewen.com/0A8069/18123624408030006/epubprivate/OEBPS/Images/53_03.jpg?sign=1734502214-mTKW0ExNMFqrN24tpRUc2jx1kXzjfIvz-0-e3c5892f5f641220a2e1663e7e1492ee)
其中的行数和列数是指不拖动滚动条就可看到的部分。另外,<textarea>…</textarea>标签对中不能使用value属性赋初始值。
例如,以下输入“评论天地”多行文本域内容的代码如下:
![](https://epubservercos.yuewen.com/0A8069/18123624408030006/epubprivate/OEBPS/Images/53_04.jpg?sign=1734502214-cK34OqPRmOZjP2tsp46gzIgzxO6DjUi9-0-8064ac15f8133925095f30dfe175577f)
其中,cols="40"表示多行文本域的列数为40列,rows="4"表示多行文本域的行数为4行,效果如图3-21所示。
![](https://epubservercos.yuewen.com/0A8069/18123624408030006/epubprivate/OEBPS/Images/53_05.jpg?sign=1734502214-D7xI0wIH7tYn8tLtbbYvxhXWI43dLzwf-0-939331c63fffcafb49b0b7c27a1b3c89)
图3-21 多行文本域
3.3.4 表单的高级用法
在某些情况下,用户需要对表单元素进行限制,设置表单元素为只读或禁用,常应用于以下场景。
只读场景:网站服务器不希望用户修改的数据,这些数据在表单元素中显示。例如,注册或交易协议、商品价格等。
禁用场景:只有满足某个条件后,才能选用某项功能。例如,只有用户同意注册协议后,才允许单击“注册”按钮。
只读和禁用效果分别通过设置“readonly”和“disabled”属性来实现。
【演练3-10】制作梦想橱柜服务协议页面,页面浏览后,服务协议只能阅读而不能修改,并且只有用户同意注册协议后,才允许单击“注册”按钮,本例文件3-10.html在浏览器中显示的效果如图3-22所示。
![](https://epubservercos.yuewen.com/0A8069/18123624408030006/epubprivate/OEBPS/Images/54_01.jpg?sign=1734502214-dWBmfC1wuhxpaajrd9wxDL6lHhF9SMa4-0-81ed8cb90b05391a504402ae759005da)
图3-22 页面的显示效果
代码如下:
![](https://epubservercos.yuewen.com/0A8069/18123624408030006/epubprivate/OEBPS/Images/54_02.jpg?sign=1734502214-UBUxDgJ3srmYgeTnaqINFWq39HnPrkdk-0-ce64f897fa537fe2107733bde883eb11)
【说明】用户单击“同意以上协议”复选框并不能真正实现使“注册”按钮有效,还需要为复选框添加JavaScript脚本才能实现这一功能,这里只是讲解如何使表单元素只读和禁用。
3.3.5 案例——制作梦想橱柜会员注册表单
在讲解了以上表单元素的基础上,下面通过一个综合的案例将这些表单元素集成在一起,制作梦想橱柜会员注册表单。
【演练3-11】制作梦想橱柜会员注册表单,收集会员的个人资料。本例文件3-11.html在浏览器中显示的效果如图3-23所示。
![](https://epubservercos.yuewen.com/0A8069/18123624408030006/epubprivate/OEBPS/Images/54_03.jpg?sign=1734502214-W1ROqe1Wu7yqLWr7ekW25omMnvd6kvaF-0-be3e7d7a5a27e5ad47af8c14aadd00b3)
图3-23 页面的显示效果
代码如下:
![](https://epubservercos.yuewen.com/0A8069/18123624408030006/epubprivate/OEBPS/Images/54_04.jpg?sign=1734502214-iQT1Eu8UPFt7h7gWUXfq4Da0EUBasBBU-0-c2b782398ed89517b54caf42858ac722)
![](https://epubservercos.yuewen.com/0A8069/18123624408030006/epubprivate/OEBPS/Images/55_01.jpg?sign=1734502214-bRe8YOvv6jgNG9vQKv7PuoCuGXGdMYRy-0-9faf23c640f0fea6ca45dd8f6b60f4e5)
![](https://epubservercos.yuewen.com/0A8069/18123624408030006/epubprivate/OEBPS/Images/56_01.jpg?sign=1734502214-s3Fs8ZW7BWNvW2k9PS6ZigdGO8gRQ6Qa-0-4b32b3dc3dc3c00678403b4d51280f66)
【说明】“职业”选择栏使用的是字段式列表,其<select>标签中的size属性值设置为3,表示一次可显示的列表项数为3,而“收入”选择栏使用的是下拉菜单。
3.3.6 表单布局
从上面的梦想橱柜会员注册表单案例中可以看出,由于表单没有经过布局,页面整体看起来不太美观。在实际应用中,可以采用以下两种方法布局表单:一是使用表格布局表单,二是使用CSS样式布局表单。本节主要结合上个章节讲解的表格来实现表单的布局。
【演练3-12】使用表格布局的方法制作梦想橱柜会员登录表单,表格布局示意图如图3-24所示,最外围的虚线表示表单,表单内部包含一个4行3列的表格,其中的第1行和第4行分别使用了跨2列的设置。页面在浏览器中显示的效果如图3-25所示。
![](https://epubservercos.yuewen.com/0A8069/18123624408030006/epubprivate/OEBPS/Images/56_02.jpg?sign=1734502214-KBKJHLkdNkk4VZv4yHy2vMU18M0KCpIZ-0-a5c79c93528511bd6195fc1975d34d01)
图3-24 表格布局示意图
![](https://epubservercos.yuewen.com/0A8069/18123624408030006/epubprivate/OEBPS/Images/56_03.jpg?sign=1734502214-8sTZyQIT4jv7fZcBKHi2B0MCOPvAnue7-0-01dba85d1f6741b23b0ecb1c6d6db93c)
图3-25 页面显示效果
代码如下:
![](https://epubservercos.yuewen.com/0A8069/18123624408030006/epubprivate/OEBPS/Images/56_04.jpg?sign=1734502214-mgAAS7EjPXrG3IFLHRUTLRCWlEAgKiCr-0-214c7ede1c501e536867d30d7a7228e5)
![](https://epubservercos.yuewen.com/0A8069/18123624408030006/epubprivate/OEBPS/Images/57_01.jpg?sign=1734502214-x0Wtkly0SCQJaFQ5vxTQV8LfRHVqvBsC-0-dd2d04c2e66fd7adf385ef6952c724a4)
【说明】
①在使用表格布局表单的应用中,要注意结合表单的数据信息计算表格布局所需要的行数和列数。
②在制作某些特殊元素的时候,往往需要使用表格的跨行跨列技术,例如,登录图片按钮需要跨2列。
③当单元格内没有布局的内容时,必须使用“空格”填充以实现布局效果。