如下所示：
XML/HTML Code 复制内容到剪贴板
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://HdhCmsTestw3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > < html xmlns = "http://HdhCmsTestw3.org/1999/xhtml" > < head > < title > 注册表单 </ title > </ head > < body > < form action = "DoFormAction.htm" > < fieldset style = "width=800px" > <!--套住注册表格的边框--> < legend > 请输入如下的信息然后进行注册 </ legend > < table cellspacing = "0px" cellpadding = "6px" border = "1px" bordercolor = "black" align = "center" width = "600px" > < tr > < td align = "right" > 用户名: </ td > <!--文本框--> < td > < input type = "text" size = "20" style = "width:150px" /> </ td > </ tr > < tr > < td align = "right" > 密码: </ td > <!--密码框--> < td > < input type = "password" size = "20" style = "width:150px" /> </ td > </ tr > < tr > < td align = "right" > 确认密码: </ td > < td > < input type = "password" size = "20" style = "width:150px" /> </ td > </ tr > < tr > < td align = "right" > 性别: </ td > <!--单选框--> < td > < input type = "radio" checked = "checked" name = "sex1" value = "男" /> 男 < input type = "radio" name = "sex1" value = "女" /> 女 </ td > </ tr > < tr > < td align = "right" > 性别(可以点文字选择): </ td > < td > < fieldset style = "width:150px" > <!--表单外框，也可以通过css设置宽度--> < legend > 请选择性别 </ legend > < input type = "radio" checked = "checked" name = "sex2" value = "男" id = "man" /> < label for = "man" > 男 </ label > < input type = "radio" name = "sex2" value = "女" id = "woman" /> < label for = "woman" > 女 </ label > </ fieldset > </ td > </ tr > < tr > < td align = "right" > 城市: </ td > <!--下拉框--> < td > < select name = "city" > < option value = "北京" > 北京 </ option > < option value = "深圳" > 深圳 </ option > < option value = "上海" > 上海 </ option > < option value = "南昌" selected = "selected" > 南昌 </ option > <!--默认选择南昌--> </ select > </ td > </ tr > < tr > < td align = "right" > 城市所在区域: </ td > < td > < select name = "area" > < optgroup label = "北京" > <!--下拉框分组显示--> < option value = "朝阳区" > 朝阳区 </ option > < option value = "海淀区" > 海淀区 </ option > < option value = "其他区" > 其他区 </ option > </ optgroup > < optgroup label = "南昌" > < option value = "东湖区" > 东湖区 </ option > < option value = "西湖区" > 西湖区 </ option > < option value = "青山湖区" > 青山湖区 </ option > </ optgroup > </ select > </ td > </ tr > < tr > < td align = "right" > 交友目标: </ td > < td > < select name = "target" size = "3" multiple = "multiple" > <!--列表框--> < option value = "同行" selected = "selected" > 同行 </ option > < option value = "普通朋友" > 普通朋友 </ option > < option value = "爱人" > 爱人 </ option > </ select > </ td > </ tr > < tr > < td align = "right" > 爱好: </ td > < td > <!--复选框,注意name属性设置一样，分组--> < input type = "checkbox" name = "love" value = "足球" /> 足球 < input type = "checkbox" name = "love" value = "蓝球" /> 蓝球 < input type = "checkbox" name = "love" value = "乒乓球" /> 乒乓球 </ td > </ tr > < tr > < td align = "right" > 照片上传: </ td > < td > <!--文件选择框--> < input type = "file" name = "myPic" /> </ td > </ tr > < tr > < td align = "right" > 自我介绍: </ td > < td > <!--多行文本框--> < textarea rows = "5" cols = "50" > </ textarea > </ td > </ tr > < tr > < td align = "center" colspan = "2" > < input type = "submit" value = "确定" /> < input type = "reset" value = "清空" /> < input type = "image" src = "images/btnreg.png" onclick = "alert('hello')" /> <!--演示图片按钮(会提交数据，类似submit) --> </ td > </ tr > </ table > </ fieldset > </ form > </ body > </ html >
以上就是小编为大家带来的HTML Form表单元素全面了解的全部内容了，希望对大家有所帮助，多多支持~
查看更多关于HTMLForm表单元素全面了解的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did37500