|
下面讨论表单元素的类型及常用的属性。
本节单词记忆：标签 1.select 2.option 3.textarea 属性 1.text 2.password 3.radio 4.checkbox 5.name 6.value 7.reset 8.submit 9.button
网页学习网提示：html语言非常简单，不需要逻辑理解，而绝大部分朋友觉得它难以掌握，90%的原因在于英语单词不过关，所以每节记忆几个单词是非常有必要的。
1.文本框
在表单中最常用最常见的表单输入元素就是文本框(text)，它提供给用户输入单行文本信息，例如用户名的输入框。若要在文档的表单里创建一个文本框，将表单元素type属性设为text就可以了。
示例1:
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=gb2312">
<TITLE>文本框练习</TITLE>
</HEAD>
<BODY>
<FORM name="form1" method="post" action="">
<P>名 字：
<INPUT type="text" value="张三" size="20" name="fname">
</P>
<P>姓 氏：
<INPUT name="lname" type="text">
</P>
<P>登录名：
<INPUT name="sname" type="text" size="20">
</P>
</FORM>
</BODY>
</HTML>
示例2在浏览器中预览效果如图1所示。
图1 文本框的效果 2.密码框
将图1中的表单元素的type属性设为password就可以创建一个密码框。密码框的各属性和文本框一样，唯一不同的是，密码框输入的字符全都以“*”显示。
示例2:
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=gb2312">
<TITLE>密码框</TITLE>
</HEAD>
<BODY>
<FORM name="form2" method="post" action="">
<P>用户名：
<INPUT name="name" type="text" size="21">
</P>
<P>密 码：
<INPUT name="pass" value="123456" type="password" size="22">
</P>
</FORM>
</BODY>
</HTML>
示例2在浏览器中预览效果如图2所示。
图2 密码框的效果 小问答：密码框能保证输入数据的安全吗？
不能，密码框仅仅使周围的人看不见输入的符号，它不能保证输入的数据安全。为了使数据安全，应该加强人为管理，采用数据加密技术等。
3.单选按钮
将图1中的表单元素的type属性设为radio就可以创建一个单选按钮。单选按钮控件用于一组相互排斥的值，组中的每个单选按钮控件应具有相同的名称，用户一次只能选择一个选项。只有从组中选定的单选按钮才会在提交的数据中生成name/value对，单选按钮需要一个显式的value属性。
示例3:
<HTML>
<HEAD>
<TITLE>单选按钮</TITLE>
</HEAD>
<BODY>
<FORM name="form3" method="post" action="">
<BR>性别：
<INPUT name="gen" type="radio" class="input" value="男" checked="checked">
<IMG src="images/Male.gif" width="23" height="21">男
<INPUT name="gen" type="radio" value="女" class="input">
<IMG src="images/Female.gif" width="23" height="21">女
</FORM>
</BODY>
</HTML>
示例3在浏览器中预览效果如图3所示。
图3 单选按钮效果 4.复选框
将图1中的表单元素的type属性设为checkbox就可以创建一个复选框。用户可以选择多个复选框，选择了复选框时，会将一个name/value对与FORM一起提交。
示例4:
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=gb2312">
<TITLE>复选框</TITLE>
</HEAD>
<BODY>
<FORM name="form4" method="post" action="">
爱好：
<INPUT type="checkbox" name="cb1" value="sports" >运动
<INPUT type="checkbox" name="cb2" value="talk"checked="checked">聊天
<INPUT type="checkbox" name="cb3" value="play">玩游戏
</FORM>
</BODY>
</HTML>
示例4在浏览器中预览效果如图4所示。
图4 复选框效果 对比：单选按钮应具有相同的名字，便于互斥选择；而复选框可以有不同的名字，并不需要属于一组。
5.列表框
列表框主要是为了用户快速、方便、正确地选择一些选项，而且还能节省页面空间，它是通过<SELECT>和<OPTION>标签来实现的。<SELECT>标签用于显示可供用户选择
的下拉列表，每个选项由一个<OPTION>标签表示，<SELECT>标签必须包含至少一个<OPTION>标签。
语法:
<SELECT name="指定列表名称" size="行数">
<OPTION value="可选项的值" selected>……</OPTION>
<OPTION value="可选项的值">……</OPTION>
……
</SELECT>
其中，在有多种选项可供用户滚动查看时，size确定列表中可同时看到的行数；selected表示该选项在默认情况下是被选中的，而且一个列表框中只能有一个列表项默认被选中，如同单选按钮组那样。
示例5:
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=gb2312">
<TITLE>列表框</TITLE>
</HEAD>
<BODY>
<FORM name="form5" method="post" action="">
出生日期：
<INPUT name="byear" value="yyyy" size=4 maxlength=4>
年
<SELECT name="bmon">
<OPTION value="" selected="selected">[选择月份]</OPTION>
<OPTION value=0>一月</OPTION>
<OPTION value=1>二月</OPTION>
<OPTION value=2>三月</OPTION>
<OPTION value=3>四月</OPTION>
<OPTION value=4>五月</OPTION>
<OPTION value=5>六月</OPTION>
<OPTION value=6>七月</OPTION>
<OPTION value=7>八月</OPTION>
<OPTION value=8>九月</OPTION>
<OPTION value=9>十月</OPTION>
<OPTION value=10>十一月</OPTION>
<OPTION value=11>十二月</OPTION>
</SELECT>
月
<INPUT name="bday" value="dd" size=2 maxlength=2 >
日
</FORM>
</BODY>
</HTML>
示例5在浏览器中预览效果如图5所示。
图5 列表框效果 6.按钮
按钮在表单中经常用到，在HTML中按钮分为3种，分别是普通按钮(button)、提交按钮(submit)和重置按钮(reset)。普通按钮主要用来响应onClick事件，提交按钮用来提交表单信息，重置按钮用来清除表单中已填信息。
语法:
<INPUT type="reset" name="Reset" value=" 重填">
其中，若type=”button”表示是普通按钮；若type=”submit"表示是提交按钮；若type=”reset”表示是重置按钮。name是用来给按钮起名字，value用来设置显示在按钮上的文字。
示例6:
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=gb2312">
<TITLE>按钮</TITLE>
</HEAD>
<BODY>
<FORM name="form1" method="post" action="">
<P>用户名：
<INPUT name="name" type="text" size="21">
</P>
<P>密 码：
<INPUT name="pass" type="password" size="22">
</P>
<P>
<INPUT type="reset" name="Reset" value=" 重填 ">
<INPUT type="submit" name="Button" value="同意以下服务条款，提交注册信息" >
</P>
<P>
<INPUT type="button" name="confirm" value="点播音乐">
<INPUT type="button" name="cancel" value="取消">
</P>
</FORM>
</BODY>
</HTML>
示例6在浏览器中预览效果如图6所示。
图6 按钮预览效果 7.多行文本框
当我们要在网页中输入两行或两行以上的文本时，怎么办？显然，前面学过的文本框及其他表单元素都不能满足要求，这就应该使用多行文本框，它使用的标签是<TEXTAREA>。
语法:
<TEXTAREA name="textarea" cols="40" rows="6">文本内容<TEXTAREA>
其中，若type=”button”表示是普通按钮；若type=”submit"表示是提交按钮；若type=”reset”表示是重置按钮。name是用来给按钮起名字，value用来设置显示在按钮上的文字。
示例7:
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=gb2312">
<TITLE>多行文本框</TITLE>
</HEAD>
<BODY>
<FORM name="form7" method="post" action="">
<H4><IMG src="images/read.gif" width="35" height="26">阅读淘宝网服务协议 </H4>
<P>
<TEXTAREA name="textarea" cols="40" rows="6">欢迎阅读服务条款协议，本协议阐述之条款和条件适用于您使用Taobao.com网站的各种工具和服务。
本服务协议双方为淘宝与淘宝网用户，本服务协议具有合同效力。
淘宝的权利和义务
1.淘宝有义务在现有技术上维护整个网上交易平台的正常运行，并努力提升和改进技术，使用户网上交易活动的顺利。
2.对用户在注册使用淘宝网上交易平台中所遇到的与交易或注册有关的问题及反映的情况，淘宝应及时作出回复。
3.对于在淘宝网网上交易平台上的不当行为或其它任何淘宝认为应当终止服务的情况，淘宝有权随时作出删除相关信息、终止服务提供等处理，而无须征得用户的同意。
4.因网上交易平台的特殊性，淘宝没有义务对所有用户的注册资料、所有的交易行为以及与交易有关的其他事项进行事先审查。
</TEXTAREA>
</P>
</FORM>
</BODY>
示例7在浏览器中预览效果如图7所示。
图7 多行文本框效果 本节作业：
制作如下图网页。
注意事项：
1.注意表格和表单的结合使用。
2.分清表单各元素的写法，特别注意<SELECT><OPTION>的结合使用。
网页学习网提示：光看教程是无法让你掌握HTML知识，最好是完成作业后才进入下一次教程，动起手来吧！
点击下载第三章案例及作业资源 返回《HTML入门经典》教程列表
|
