网页设计表单

Companyname网页设计与开发第9章表单清华大学出版社主要内容•理解表单的概念•掌握表单的属性设置•掌握表单对象属性的设置9表单的概念表单是网页中提供的一种交互式操作手段，在网页中的使用十分广泛。无论是提交搜索的信息，还是网上注册等都需要使用表单。用户可以通过提交表单信息与服务器进行动态交流，是网站管理员与浏览者之间沟通的桥梁。利用表单处理程序可以收集、分析用户的反馈意见，做出科学的、合理的决策。9表单的概念在网页中，最常见的表单形式主要包括文本框、单选按钮、复选框、下拉菜单、按钮等。文本框下拉菜单按钮9表单的概念表单有两个重要组成部分：一是描述表单的HTML源代码；二是用于处理用户在表单域中输入的信息的服务器端应用程序客户端脚本，如ASP.NET、JSP等。表单使用的form标记是成对出现的，在首标记form和尾标记/form之间的部分就是一个表单。inputinput是个单标记，它必须嵌套在表单标记中使用，用于定义一个用户的输入项。input基本语法forminputname=type=/form9.1单行文本输入框textinput语法说明–input标记主要属性有：type，name，size，value，maxlength等。其中name和type是必选的两个属性；–Name:属性的值是相应程序中的变量名。–在不同的输入方式下，input标记的格式略有不同，其他五种属性因type类型的不同，其含义也不同；–type主要有九种类型：text，submit，reset，password，checkbox，radio，image，hidden，file。9.1单行文本输入框text9.1单行文本输入框text当type=text时，表示该输入项的输入信息是字符串。此时，浏览器会在相应的位置显示一个文本框供用户输入信息。基本语法：forminputname=texttype=textmaxlength=size=value=/forminput语法说明–maxlength：设置单行输入框可以输入的最大字符数，例如限制邮政编码为6个数字、密码最多为10个字符等等；–size：设置单行输入框可显示的最大字符数，这个值总是小于等于maxlength属性的值，当输入的字符数超过文本框的长度时，用户可以通过移动光标来查看超过超出的内容；–value：文本框的值，可以通过设置value属性的值来指定当表单首次被载入时显示在输入框中的值。9.1单行文本输入框text!--程序9-1--htmlheadtitle插入文本框/title/headbodyform登录名：inputname=texttype=textmaxlength=8“size=5value=1/form/body/html9.1单行文本输入框text9.1单行文本输入框text9.2密码输入框password密码输入框password与单行文本输入框text使用起来非常相似，所不同的只是当用户在输入内容时，是用“*”来代替显示每个输入的字符，以保证密码的安全性。基本语法：forminputname=passwordtype=passwordmaxlength=size=/form语法说明:在表单中插入密码框，只要将input标记中type属性值设为password就可以插入密码框，maxlength、size属性同文件输入框text的属性一样。9.2密码输入框password!--程序9-2--htmlheadtitle输入用户名和密码/title/headbodyform用户名：inputtype=textname=yournamesize=15br密 码：inputtype=passwordname=yourpwsize=15br/form/body/html9.2密码输入框password9.2密码输入框password9.3提交按钮submit和重置按钮reset当type=submit时，产生一个提交按钮，当用户单击该按钮时，浏览器就会将表单的输入信息传送给服务器。当type=reset时，产生一个重置按钮，当用户单击该按钮时，浏览器就会清除表单中所有的输入信息而恢复到初始状态。一般情况下，提交与重置按钮经常同时出现。提交基本语法：forminputname=“…type=“submitvalue=“inputname=“…type=“resetvalue=“/form9.3提交按钮submit和重置按钮reset语法说明–提交按钮的name属性是可以默认的。除name属性外，它还有一个可选的属性value，用于指定显示在提交按钮上的文字，value属性的默认值是“提交”。在一个表单中必须有提交按钮，否则将无法向服务器传送信息；–重置按钮的name属性也是可以默认的。value属性与submit类似，用于指定显示在清除按钮上的文字，value的默认值为“重置”。9.3提交按钮submit和重置按钮reset!--程序9-3--htmlheadtitle注册/title/headbodyform请输入你的姓名：inputtype=textname=yournamebr/请输入你的年龄：inputtype=textname=youragebr/inputtype=submitvalue=提交inputtype=resetvalue=重置/form/body/html9.3提交按钮submit和重置按钮reset9.3提交按钮submit和重置按钮reset9.4单选按钮和复选框按钮单选按钮基本语法：forminputname=radiotype=radiovalue=/form语法说明：–单选项必须是唯一的，即用户只能选中表单中所有单选项中的一项作为输入信息，因此，所有属性的name都应取相同的值；–不同的选项其属性value的值应是不同的；–checked属性用于指定该选项在初始时是被选中的。!--程序9-4-1--htmlheadtitle设置/title/headbody每页最多显示邮件数：brforminputtype=radioname=m1value=1010封brinputtype=radioname=m1value=2020封(推荐)brinputtype=radioname=m1value=3030封brinputtype=radioname=m1value=5050封brinputtype=radioname=m1value=100100封brinputtype=submitvalue=提交/form/body/html9.4单选按钮和复选框按钮9.4单选按钮和复选框按钮9.4单选按钮和复选框按钮复选框按钮基本语法：forminputname=texttype=checkboxvalue=/form语法说明：–用户可以同时选中表单中的一个或多个复选项作为输入信息，由于选项可以有多个，属性name应取不同的值；–属性value的参数值就是在该选项被选中并提交后，浏览器要传送给服务器的数据。因此，value属性的参数值必须与选项内容相同或基本相同，该属性是必选项；–checked属性用于指定该选项在初始时是否被选中。!--程序9-4-2--htmlheadtitle选择/title/headbody请选择你喜欢的运动：brforminputtype=checkboxname=basketballvalue=basktball篮球brinputtype=checkboxname=footballvalue=football足球brinputtype=checkboxname=tennisvalue=tennis网球brinputtype=submitvalue=提交/form/body/html9.4单选按钮和复选框按钮9.4单选按钮和复选框按钮9.4单选按钮和复选框按钮图像按钮基本语法：forminputname=imagetype=imagesrc=url/form语法说明：–单击该按钮时，浏览器就会将表单的输入信息传送给服务器。image类型中的src属性是必需的，它用于设置图像文件的路径。!--程序9-4-3--htmlheadtitle表单中图像按钮/title/headbodyformaction=index.aspxmethod=post你最喜欢的运动：selectname=sportsoptionvalue=football足球optionvalue=bastetball篮球optionvalue=volleyball排球/selectinputtype=imagesrc=“008.jpgvalue=提交/form/body/html9.4单选按钮和复选框按钮9.4单选按钮和复选框按钮9.4单选按钮和复选框按钮button–input标记中type属性值button用来插入表单中的标准按钮。–标准按钮的“value”属性，可以根据制作者的需要，任意设置属性值。inputtype=button”name=”b1”value=”标准按钮”button基本语法：9.5多行文本输入框textarea用textarea标记可以来定义高度超过一行的文本输入框，textarea标记是成对标记，首标记textarea和尾标记/textarea之间的内容就是显示在文本输入框中的初始信息。textarea标记属性有：name，rows，cols，readonly，disabled。基本语法：formtextareaname=textareacols=rows=wrap=“/textarea/form语法说明：–name：用于指定文本输入框的名字。–rows：设置多行文本输入框的行数，此属性的值是数字，浏览器会自动为高度超过一行的文本输入框添加垂直滚动条。但是，当输入文本的行数小于或等于rows属性的值时，滚动条将不起作用。–cols：设置多行文本输入框的列数。–disabled：规定第一次加载的时候该文本区不可用。–Readonly：将文本区的内容设置为不可修改。9.5多行文本输入框textarea!--程序9-5--htmlheadtitle请提宝贵意见/title/headbodyform请提宝贵意见：brtextareaname=yoursuggestcols=50rows=3/textareabrinputtype=submitvalue=提交inputtype=resetvalue=重写/form/body/html9.5多行文本输入框textarea9.5多行文本输入框textarea9.6下拉列表框select、option在表单中，通过select和option标记可以在浏览器中设计一个下拉式的列表或带有滚动条的列表，用户可以在列表中选中一个或多个选项。基本语法：formselectname=size=optionsvalue=…optionsvalue=/select/form9.6下拉列表框select、option语法说明：–sel