表单css下拉菜单

·80·第7章表单网页中的表单可以用来收集用户填写的信息,如某网站的问卷调查、网站的注册会员等都会用到表单.
表单可以说是个容器,里面的类型不同,所表示的功能也不同.
表单容器里面的表单元素,其中有文本框、密码框、单选框、复选框等,通过标记体现它们的功能.
在本章中,将会学到以下知识:表单和表单元素文本框和密码框表单单选框和复选框按钮下拉框和文本域7.
1表单基本语法表单是一个能够包含表单元素的容器,表单元素是能够让用户在表单中输入信息的元素,可以这样说,表单里面包含表单元素.
表单在动态网页中常用,用来收集用户的信息,保存到数据库中.
表单语法是由一对标签对组成.
在上面的表单中就可以包含表单元素,用表单元素添加信息,不同的表单元素所表现的功能不一样,如input输入类型有text、password等等,分别输入的是文本和密码,下一节会讲到表单元素,代码7.
1是表单的基本用法.
代码7.
1表单基本语法源代码\第7章\表单基本语法.
htm表单基本语法表单有两个属性会常用到,就是action和method,form中的action是表示表单提交后发送的URL地址,发送的方式用method表示,可选择的参数有GET和POST.
GET传输·81·量比较小,而POST传输值比较大,这是二者最基本区别.
现在可以知道,一个表单除了要用表单元素外,还会用到这两个属性来传值,值是传给URL地址的后台,处理后保存到数据库,本书中只讲解前台页面知识.
代码7.
2是表单的完整实例.
代码7.
2表单两属性源代码\第7章\表单两属性.
htm表单两属性代码7.
2表示在网页中的表单上,有两个输入框和一个按钮,当单击"提交"按钮后,表单中的信息通过表单元素收集值,然后通过GET方法传到show.
aspx(本页面是.
net的动态页)页面.
本书只讲解前台部分知识,图7.
1就是上述代码的页面效果.
图7.
1表单action和method注意:action后面的值因动态语言不同而后缀不一样.
Method的值只能是GET和POST的一种.
在上面的实例中可以看到,在表单里面用到语法,表示在表单中输入选项,完整的语法代码如下:其中#代码可选项,text、password、checkbox、radio、hidden、submit和reset.
分别代·82·表:文本、密码、多选框、单选框、隐藏、提交按钮和重置按钮,这就是上面常讲到的表单元素.
有关的部分选项值,稍后做出详细讲解.
注意:与php、aspx、jsp等为后缀的动态网页结合,所用动态语言不同,但用表单和表单元素都相同的.
7.
2文本框和密码框通过上一节的学习,知道了表单元素,现在开始学习表单元素的部分类型.
在网页中常常看到用户输入帐号和密码之类的信息,现在学习的正是如何来定义文本框和密码框.
7.
2.
1文本框在中,用type来表示要选择的类型,文本框是用来输入文本信息的,可以输入汉字、数字和字母等,完整语法代码如下:上面就代表一行输入文本的输入框,供用户输入信息,关键地方是在type后面选择text,正好代表文本,从页面表现的效果正是用户在登录时的那些输入格式,代码7.
3所表示的是文本框完整代码.
代码7.
3文本框表示源代码\第7章\文本框.
htm文本框文本框:上面代码的文本框,标记为,参数type表示框中的类型,在此输入的是text,表示文本框.
代码的浏览效果如图7.
2所示.
·83·图7.
2文本框注意:文本框的上限是255个字元.
在里面还有很多属性,本节不打算介绍,现在先让读者对有初步的认识.
7.
2.
2密码框密码框是为了隐藏用户密码信息的输入框,语法形式与文本框差不多,不同的是类型为password.
可能有的读者会问,在密码框里面输入的密码信息会不会显示出来,如果这样的话密码就不安全了.
其实这个不用担心,当在密码框输入密码时,所输入的字符等全用"*"替代,这样从页面显示上隐藏了密码信息,密码框在表单上的语法形式:表示一个用来输入密码的框并且会用"*"替代输入的信息,与文本框一样,里面还有属性可以选择,这在以后慢慢讲解,代码7.
4演示密码框的使用.
代码7.
4密码框表示源代码\第7章\密码框.
htm密码框密码框:代码7.
4中,表示密码框的关键代码是:密码框的设置与文本框一样,在标记下设置type参数为password表示密码,其中密码框中输入的文本被小圆点代替,为了隐藏密码,起到安全作用,当刷新页面时,密码及时清除,效果如图7.
3所示.
·84·图7.
3密码框注意:密码框是为了保证密码安全性,当在制作相应的表单和密码框的网页时,也要考虑表单或密码的安全性.
7.
3单选框和复选框表单的功能就是收集用户填写的信息.
当出现多个选项而且只能选择一个选项时,当可以选择两个或两个以上时,就会分别用到单选框和复选框.
通过本节的学习,使读者掌握如何在网页中要求用户填表单时是单选还是复选,单选在选项中只能选择一项,而复选可以选择多项,即本节介绍的单选框和复选框.
7.
3.
1单选框单选框是在表单中有多个选项,且只能选一个的情况下使用.
和文本框与密码框一样,都是设置在里面的type属性上,表示单选的是radio,请看下面单选框的语法代码:在表单中,单选框是存在多个选项的,当从多选项中选择一个选项中,为了区别这几个选项是属于哪个单选框的时,用属性name表示.
如果想指定某个选项处于选中状态下时,用checked在为radio类型里表示选中状态,从第一个结束到下一个开始前表示第一个的选项值,代码7.
5演示了单选框用法.
代码7.
5单选框表示源代码\第7章\单选框.
htm单选框下面是单选框:DIV·85·HTMLCSS效果如图7.
4所示.
图7.
4单选表示注意:radio在中是单独表示的,后面不用结束符,选项的结束是下一个或表单其他项框开始.
7.
3.
2复选框顾名思义,复选框是可以选多个选项的选项框,与单选不同的是复选框可以选取多个选项,而且也可以默认几个选项都处于选中状态,语法与单选相同:复选框的type里的值是checkbox,与单选框一样,可以用checked表示选中状态.
在需要选项是多选时用到复选框,代码7.
6表示复选框用法.
代码7.
6复选框表示源代码\第7章\复选框.
htm复选框下面是复选框:DIV知识HTML知识CSS知识·86·HTML+CSS知识在复选框中,多个选项组成选项集,它们的name都为同一名称,这时可以选择多个选项,选中的选项,在复选框中用"√"表示,可以选一个或一个以上的选项,复选框的浏览效果如图7.
5所示.
图7.
5复选框表示说明:单选框与复选框的区别就是被选项是选择一个还是至少一个.
7.
4下拉列表与文本域本节来学习下拉列表与文本域,下拉列表是可以选择的列表也称为下拉表;文本域是可以输入多行文本的区域.
在表单中常用到,当要选择出生年月时,就会用到下拉表,同理,选择省份时也会用到.
文本框在填写多行文本时,会用到.
下拉表与文本框在网页应用非常广,本节来学习它们.
7.
4.
1下拉表下拉列表是可以选择的列表,当在列表中选择要选的选项时使用,只能选其中一个选项(通过设置也可以选几项).
语法形式如下:选项一选项二选项三下拉表是用标记对表示,标记对里面的文字是下拉表的选择项,其中它的属性selected表示已选中状态.
代码7.
7演示了下拉表用法.
·87·代码7.
7下拉表源代码\第7章\下拉表.
htm下拉表HTMLCSSDIV在下拉表中,用select标记对表示下拉表,且设置被选中的选项时,在内加上selected表示选中,效果如图7.
6所示.
图7.
6下拉表技巧:里的属性可以由name代表这个下拉表的名称,size表示下拉表可视选项的数目,multiple表示可以多选.
7.
4.
2文本域文本域是用在要输入多行文本,填写大量的文字时用到.
语法与前面不同的是没有用到,而是用标签对包括着,代码7.
8为默认的空文本框,表现出文本框的用法.
代码7.
8文本域源代码\第7章\文本域.
htm·88·文本域图7.
7表示默认文本区域的大小,文本域中可以输入多行文本,右边的滚动条因文本多少而显示.
图7.
7文本域多行文本域是在文本域上加上两个属性来表示:rows表示显示的行数,cols表示显示的列数.
通过设置行数和列数来改变文本框的小大,以便与页面统一布局.
代码7.
9为多行文本域.
代码7.
9多行文本域源代码\第7章\多行文本域.
htm多行文本域代码7.
9中,表示文本框在网页中的用法.
其中,文本框标记为textarea,且为标记对,设置了参数name为book,同时,设置行数为6行,而列为60个字符,图7.
8演示了多行文本域.
·89·图7.
8多行文本域说明:在设置文本域大小时,根据将文本域内容的多少而设定,文本域大小与表单大小所占比例要适中(两者要有一定美观性).
7.
5按钮按钮在表单中是最重要的,当输完表单信息时,需要按钮提交,当输入错误信息时,这时需要清除按钮更方便.
之前所讲的内容都是单项讲解的,一张完整的网页表单是需要提交按钮提交数据的.
按钮是中类型为submit的标单元素,表示提交.
用来提交表单数据给action的网页上.
其完整语法代码如下:在里面的type设置成submit后,还要给value设置按钮名称,名称是用来显示在按钮上的文字和字母.
按钮在表单中起提交或重置作用,在标记input中设置为submit表示提交本表单,可以把前台填写的数据添加到网页后台.
然后再保存到数据库中,当然,进一步操作超过了网页布局的范围,不属于本书讲解之中,但需要了解和掌握表单布局和设置,代码7.
10表示按钮在表单的用法.
代码7.
10源代码\第7章\按钮.
htm按钮帐户:·90·密码:复选框复选框二复选框三在一个简单的表单中,出现了用文本框表示帐户,用密码框表示密码的输入框,还有复选框的设置,最后的按钮表示提交整个表单给后台,表单内容如何提交到后台不是本书范围,如读者想知道其原理,请查阅相关书籍.
在本表单实例中,前台页面即是表单实现页面,效果如图7.
9所示.
图7.
9按钮提交注意:按钮有submit和reset之分,前者是提交功能,后者是重置表单,即还原成表单的默认状态.
7.
6表单实例手把手通过本章学习,知道了表单的用法,以及表单元素的表示.
本节用实例介绍注册页面表单制作.
其中包括表单、输入文本框,密码,单选框等,通过学习,希望读者能举一反三,从而对表单有更深层次的理解.
本实例从HTML标记入手,只讲解网页前台部分(因为表单提交后,通过后台保存到数据库中),以学习这些标记为主,以下是表单实例手把手的步骤.
·91·7.
6.
1插入表单在新建网页中插入表单,表单的标记为,放在标记对中,表示在网页中存在表单,当然,在一个网页中可以存在多个表单,即多少表单有多少个.
其中表单中包括单选框、多选框等,最后用提交按钮把信息提交出去,即表单相当于一个容器,代码7.
11表示表单容器.
代码7.
11源代码\第7章\表单实例手把手.
html表单实例手把手用户注册页面表单实例代码中新建了表单容器,并在表单里面输入一行文字,存在段落标记对,效果如图7.
10所示.
图7.
10表单容器7.
6.
2添加文本框和密码框在表单中显示用户名输入,并有两次密码输入.
注册页面都有用户名和密码,而且密码在创立之初,要输入二次,显然,第二次是用来确定密码是否一致,代码7.
12表示文本框用来输入用户名,密码框用来输入密码.
代码7.
12用户名和密码源代码\第7章\表单实例手把手.
htm表单实例手把手·92·用户注册页面表单实例用户名:密码:确认密码:以上代码中,中的type为text是表示文本.
输入用户名的框是文本,而密码的类型为password,效果如图7.
11所示.
图7.
11用户名和密码表示7.
6.
3添加单选框和复选框添加部分选项实现单选框和复选框.
注册页面时,会提供部分选项要用户选择,有的只能选一个,如年龄层次的选项;有的可以选多个,如个人爱好有很多可以选择,代码7.
13是单选项和复选项.
代码7.
13单选项和复选项源代码\第7章\表单实例手把手.
htm表单实例手把手·93·用户注册页面表单实例用户名:密码:确认密码:您的年龄层是16周岁以下17-22周岁23-28周岁29周岁以上您个人的爱好有:交友上网看书篮球游戏其他代码7.
13是在文本框和密码框的基础上,在表单中再加上单选框和复选框的代码,效果如图7.
12所示.
图7.
12单选项和复选项表示·94·7.
6.
4添加下拉表和文本域下拉表是下拉的列表,用户在下拉的列表中选择里面的选项;文本域就是可以输入多行的文本区域,即可以实现回车换行的区域,代码7.
14表示下拉表与文本域.
代码7.
14下拉表与文本域表示源代码\第7章\表单实例手把手.
htm表单实例手把手用户注册页面表单实例用户名:密码:确认密码:您的年龄层是16周岁以下17-22周岁23-28周岁29周岁以上您个人的爱好有:交友上网看书篮球游戏其他您来自哪里北京广东上海其他城市自我介绍:·95·把下拉表命名为come,且选项广东为默认选中状态;在页面中,添加了一个5行且每行为60字大小的文本可视区域,效果如图7.
13所示.
图7.
13下拉表和文本域表示7.
6.
5在表单中添加提交按钮一个表单必需提交后才能保存数据到数据库,所以提交按钮是不能少的,代码7.
15添加了一个提交按钮和重置按钮.
代码7.
15提交和重置按钮源代码\第7章\表单实例手把手.
htm表单实例手把手用户注册页面表单实例·96·用户名:密码:确认密码:您的年龄层是16周岁以下17-22周岁23-28周岁29周岁以上您个人的爱好有:交友上网看书篮球游戏其他您来自哪里北京广东上海其他城市自我介绍:按钮的值用中的value属性表示,此时整个注册网页就完成了.
本实例只讲解表单和表单元素的用法,所以对显示效果没做处理,效果并不是最终网页效果,以后学到CSS部分就可以对表单布局控制,就可以做出美观的网页.
最后整个网页效果如图7.
14所示.
·97·图7.
14添加按钮后整个注册页效果注意:一张表单中必需加action和method才可以提交,本实例并不涉及动态网页和后台数据处理,所以没给出action中的网页和method的方法.
7.
7小结本节主要介绍了网页中的表单,并详细讲解了前台设计的表单元素.
其中常用的表单元素有文本框和密码框、单选框和复选框、下拉表和文本域,还有按钮.
表单相当于容器,包含着表单元素,通过不同的表单元素体现的不同功能,使网页能够收集不同信息.
最后通过实例再次认识了表单和表单元素的用法.