如下所示:
XML/HTML Code复制内容到剪贴板- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.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表单元素全面了解的全部内容了,希望对大家有所帮助,多多支持~
标签:
HTML,Form,表单,元素
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
岱庙资源网 Copyright www.zgmyg.com
暂无“HTML Form表单元素全面了解”评论...
更新日志
2024年11月15日
2024年11月15日
- 英雄联盟第二届老头杯什么时候开始 老头杯s2赛程时间队伍名单汇总
- AI赋能卓越显示技术共筑数字未来:三星显示器产品矩阵亮相2024进博会
- 技术剖析:天玑9400如何打造移动最强GPU和游戏体验?
- 顶级装备 实力登顶:三星显示器双十一焕新升级最后冲刺
- 陈影《绝色靓声》WAV+CUE
- 龚玥《禅是一枝花(6N纯银SQCD)》原抓WAV+CUE
- 刘德丽《寂寞在唱歌HQCD+A2HD5》[WAV+CUE]
- 萧亚轩《钻石糖》金牌大风[WAV+CUE][989M]
- 王菲《王菲精选-菲卖品》环球唱片SHM-SACD[ISO][1.9G]
- 孙露《一抹伤HQ》头版限量[WAV+CUE][1G]
- 黄安.1989-一切从头(TP版)【天际唱片】【FLAC分轨】
- 群星.1994-浓情蜜意情歌精丫华纳】【WAV+CUE】
- 邓丽君.1983-淡淡幽情(2022环球MQA-UHQCD限量版)【环球】【WAV+CUE】
- 试音天碟《专业测试第一天碟》经典天碟精选[WAV分轨][1G]
- 试音典范 《情惹发烧情HQCD》人声发烧极品 [WAV+CUE][1G]