在表单的应用中,我们有时会用到对 form 的信息进行分组,例如“注册(regForm)”,可能会将注册信息分组成基本信息(一般为必填),详细信息(一般为可选),因此可考虑在 form 中加入下面两个标签:
fieldset:对表单进行分组,一个表单可以有多个fieldset。fieldset标签会在包含的文本和input等表单元素外面形成一个方框,legend元素作为标题。
legend:说明每组的内容描述。Label 用于表单元素 (input, textarea or select),配于 for 将值传递给相应的表单元素。
(tabindex 用于 input, textarea......,给其一个编号,使用键盘上的TAB(制表键),就很容易地进入输入框中。)
<
form
action
=""
method
="post"
name
="regForm"
id
="regForm"
>
< fieldset >
< legend > 用户登录 </ legend >
< div >
< label for ="Name" > 用户名 </ label >
< input type ="text" name ="Name" id ="Name" size ="18" maxlength ="30" />
< br />
</ div >
< div >
< label for ="password" > 密码 </ label >
< input type ="password" name ="password" id ="password" size ="18" maxlength ="30" />
< br />
</ div >
< div class ="cookiechk" >
< label >
< input type ="checkbox" name ="CookieYN" id ="CookieYN" value ="1" />
< a href ="#" title ="选择是否记录您的信息" > 记住我 </ a ></ label >
< input name ="login791" type ="submit" class ="buttom" value ="登录" />
</ div >
< div class ="forgotpass" >< a href ="#" > 您忘记密码? </ a ></ div >
</ fieldset >
< fieldset >
< legend > 用户注册 </ legend >
< p >< strong > 您的电子邮箱不会被公布出去,但是必须填写. </ strong > 在您注册之前请先认真阅读服务条款. </ p >
< div >
< label for ="Name" > 用户名 </ label >
< input type ="text" name ="Name" id ="Name" value ="" size ="20" maxlength ="30" />
*(最多30个字符) < br />
</ div >
< div >
< label for ="Email" > 电子邮箱 </ label >
< input type ="text" name ="Email" id ="Email" value ="" size ="20" maxlength ="150" />
* < br />
</ div >
< div >
< label for ="password" > 密码 </ label >
< input type ="password" name ="password" id ="password" size ="18" maxlength ="15" />
*(最多15个字符) < br />
</ div >
< div >
< label for ="confirm_password" > 重复密码 </ label >
< input type ="password" name ="confirm_password" id ="confirm_password" size ="18" maxlength ="15" />
* < br />
</ div >
< div >
< label for ="AgreeToTerms" > 同意服务条款 </ label >
< input type ="checkbox" name ="AgreeToTerms" id ="AgreeToTerms" value ="1" />
< a href ="#" title ="您是否同意服务条款" > 先看看条款? </ a > * </ div >
< div class ="enter" >
< input name ="create791" type ="submit" class ="buttom" value ="提交" />
< input name ="Submit" type ="reset" class ="buttom" value ="重置" />
</ div >
< p >< strong > * 在提交您的注册信息时, 我们认为您已经同意了我们的服务条款. < br />
* 这些条款可能在未经您同意的时候进行修改. </ strong ></ p >
</ fieldset >
</ form >
< fieldset >
< legend > 用户登录 </ legend >
< div >
< label for ="Name" > 用户名 </ label >
< input type ="text" name ="Name" id ="Name" size ="18" maxlength ="30" />
< br />
</ div >
< div >
< label for ="password" > 密码 </ label >
< input type ="password" name ="password" id ="password" size ="18" maxlength ="30" />
< br />
</ div >
< div class ="cookiechk" >
< label >
< input type ="checkbox" name ="CookieYN" id ="CookieYN" value ="1" />
< a href ="#" title ="选择是否记录您的信息" > 记住我 </ a ></ label >
< input name ="login791" type ="submit" class ="buttom" value ="登录" />
</ div >
< div class ="forgotpass" >< a href ="#" > 您忘记密码? </ a ></ div >
</ fieldset >
< fieldset >
< legend > 用户注册 </ legend >
< p >< strong > 您的电子邮箱不会被公布出去,但是必须填写. </ strong > 在您注册之前请先认真阅读服务条款. </ p >
< div >
< label for ="Name" > 用户名 </ label >
< input type ="text" name ="Name" id ="Name" value ="" size ="20" maxlength ="30" />
*(最多30个字符) < br />
</ div >
< div >
< label for ="Email" > 电子邮箱 </ label >
< input type ="text" name ="Email" id ="Email" value ="" size ="20" maxlength ="150" />
* < br />
</ div >
< div >
< label for ="password" > 密码 </ label >
< input type ="password" name ="password" id ="password" size ="18" maxlength ="15" />
*(最多15个字符) < br />
</ div >
< div >
< label for ="confirm_password" > 重复密码 </ label >
< input type ="password" name ="confirm_password" id ="confirm_password" size ="18" maxlength ="15" />
* < br />
</ div >
< div >
< label for ="AgreeToTerms" > 同意服务条款 </ label >
< input type ="checkbox" name ="AgreeToTerms" id ="AgreeToTerms" value ="1" />
< a href ="#" title ="您是否同意服务条款" > 先看看条款? </ a > * </ div >
< div class ="enter" >
< input name ="create791" type ="submit" class ="buttom" value ="提交" />
< input name ="Submit" type ="reset" class ="buttom" value ="重置" />
</ div >
< p >< strong > * 在提交您的注册信息时, 我们认为您已经同意了我们的服务条款. < br />
* 这些条款可能在未经您同意的时候进行修改. </ strong ></ p >
</ fieldset >
</ form >