fieldset标签将控件划分一个区域，看起来更规整。
<fieldset> <legend>爱好</legend> <input type="checkbox" value="篮球" /> <input type="checkbox" value="爬山" /> <input type="checkbox" value="阅读" /> </fieldset>
11.提交按钮<input type="submit"/>
当用户单击<inputt type="submit"/>的提交按钮时，表单数据会提交给<form>标签的action属性所指定的服务器处理程序。中文IE下默认按钮文本为“提交查询”，可以设置value属性修改按钮的显示文本。
<input type="submit" value="提交"/>
12.重置按钮<input type="reset"/>
当用户单击<input type="reset"/>按钮时，表单中的值被重置为初始值。在用户提交表单时，重置按钮的name和value不会提交给服务器。
<input type=“reset” value=“重置按钮"/>
13.普通按钮<input type="button"/>
普通按钮通常用于单击执行一段脚本代码。
<input type="button" value="普通按钮"/>
14.图像按钮<input type="image"/>
图像按钮的src属性指定图像源文件，它没有value属性。图像按钮可代替<input type="submit"/>，而现在也可以通过css直接将<input type="submit"/>按钮的外观设置为一幅图片。
<input type="image" src="bg.jpg" />
三、表单示例
该示例是使用表单实现的一个简单的注册页面，使用表格布局。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 01 Transitional//EN" "https://wwwworg/TR/html4/loosedtd"> <html> <head> <title>注册页面</title> <style type="text/css"> table { width: 450px; border: 1px solid red; background-color: #FFCB29; border-collapse: collapse; } td { width: 200; height: 40px; border: 1px solid black; } span { background-color: red; } </style> </head> <body style="background-color: blue; background-image: url(/image/bearjpg); background-repeat: repeat;"> <form name="registerform" id="form1" action="" method="post"> <table align="center" cellspacing="0" cellpadding="0"> <tr> <td> 用户名： </td> <td> <input type="text" /> </td> </tr> <tr> <td> 密码： </td> <td> <input type="password" /> </td> </tr> <tr> <td> 确认密码： </td> <td> <input type="password" /> </td> </tr> <tr> <td> 请选择市： </td> <td> <select> <optgroup label="中国"> <option>甘肃省</option> <option>河南省</option> <option>上海市</option> </optgroup> <optgroup label="American"> <option>California</option> <option>Chicago</option> <option>New York</option> </optgroup> </select> </td> </tr> <tr> <td> 请选择性别： </td> <td> <input type="radio" name="sex" id="male" value="0" checked="checked" /><label for="male">男</lable> <input type="radio" name="sex" id="fmale" value="1" /><label for="fmale">女</label> <input type="radio" name="sex" id="secret" value="2" /><label for="secret">保密</label> </td> </tr> <tr> <td> 请选择职业： </td> <td> <input type="radio" id="student" name="profession" /><label for="student">学生</label> <input type="radio" id="teacher" name="profession" /><label for="teacher">教师</label> <input type="radio" id="others" name="profession" /><label for="others">其他</label> </td> </tr> <tr> <td> 请选择爱好： </td> <td> <fieldset> <legend>你的爱好</legend> <input type="checkbox" name="hobby" id="basketboll" checked="checked" /><label for="basketboll">打篮球</label> <input type="checkbox" name="hobby" id="run" /><label for="run">跑步</label> <input type="checkbox" name="hobby" id="read" /><label for="read">阅读</label> <input type="checkbox" name="hobby" id="surfing" /><label for="surfing">上网</label> </fieldset> </td> </tr> <tr> <td> 备注： </td> <td> <textarea cols="30">这里是备注内容</textarea> </td> </tr> <tr> <td> </td> <td> <input type="submit" value="提交" /> <input type="reset" value="重置" /> </td> </tr> </table> </form> </body> </html>
本文来自网络收集，不代表计算机技术网立场，如涉及侵权请联系管理员删除。
ctvol管理联系方式QQ:251552304
本文章地址：https://www.ctvol.com/htmltutorial/489224.html