网页设计之5种简单的XHTML网页表单.docxVIP

网页设计之5种简单的XHTML网页表单 网页设计之5中简单的XHTML网页表单。技术1：标签 三明治 将输入框，选择框和文本框全部包含进label元素， 并全部设置为块级元素。将单选按钮和多选框显示方式设 置为inline以便于它们在同一行出现。如果你比较喜欢 label和单选按钮/多选框岀现在不同行，可以选择不把它 包含在label里面，或者使用硬换行处理。 每种情况都在下面展示了。 当这些看起来比较时髦的时候，W3C事实上已经含蓄地 展示了他们的label例子。 主要好处：简单 代码如下： label ,input, sele ct,textarea {display:bl ock;}label { margin-bott om:lOpx;}in put [type二〃r adio/z], inpu t [type二 〃che ckbox/z] {dis play:inline ;}It;formgt ;It;fieldse tgt;It;lege ndgt;Contac tFormlt;/le gendgt;It;1 abelfor=//na me/zgt ;Namel t;/labelgt; It;inputid= 〃 〃 name name= 〃 〃 ? name size= 20/gt;It; labelfor=//e mailz/gt; Ema 订It;/label gt;It;input ? 1 〃 ? 1 〃 id= email n ame二〃email size二〃20〃/g t;It;labelf or二〃Choices zzgt ;Choices  (radio) —It; emgt;wrappe dlabelIt;/e mgt;It;/lab elgt;It;inp utname二〃Cho ice〃type二〃r adio〃/gt;Ch oicellt;inp utname=z，Cho ice〃type二〃t adioVgt ;Ch oice21t;inp utname=，/Cho ? 〃 . 〃 ice type= r adioVg t ;Ch oice31t;lab elstyle=//ma rgin-bottom :0pt;〃for二〃 Choices2〃gt :Choices(ch eckbox) 一 It; emgt;non—wr appedlabel, marginreset It;/emgt;It ;/labelgt;1 t;inputname 二〃Choice2〃t ype二〃checkb oxzz/gt ;Choi cellt;input name二〃Choic e2〃type二〃ch eckboxVgt; Choice21t;i nputname二〃C hoice2〃type 二〃checkbox /gt;Choice3 It;divstyle 二height:10 px; ! justtospl itthedemoup —gt;It;/di vgt;It;labe lfor=//Choic es3z/gt ;Choi ces (checkbo x) 一 It; emgt; wrapped, har dline-break It;/emgt;It ;/labelgt;1 t;inputname 二〃Choice3〃t ype二〃checkb ox〃/gt;Choi celIt;input name二〃Choic e3〃type二〃ch eckbox〃/gt; Choice21t;i nputn ame=//C hoice3〃type 二〃checkbox /gt;Choice3 It;labelfor 二〃dropdown gt;Question It;/labelgt ;It;select! d二〃dropdown ;It;optg rouplabel=// GroupofOpti ons/zgt; It;/ optgroupgt; It;optiongt ;0ptionlIt; /optiongt;1 t;optiongt; 0ption21t;/ optiongt;It joptiongt;0 ption31t;/o z/niessage/zgt ;Messagelt; textareacol s 二〃 36〃rows 二 //12//name=zzm essage〃gt; 1 t ;/textarea gt: It ;/labe lgt; It; inpu ttype=//subm it〃value二〃s end t ;/fieldset gt; It;/form gt: 运行结果： # expamlellab el, #expamle linput,#exp amle