欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

HTML Form表单元素全面了解

程序员文章站 2022-05-06 08:54:43
...
下面小编就为大家带来一篇HTML Form表单元素全面了解。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

如下所示:


XML/HTML Code复制内容到剪贴板

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  2. <html xmlns="http://www.w3.org/1999/xhtml">

  3. <head>

  4. <title>注册表单</title>

  5. </head>

  6. <body>

  7. <form action="DoFormAction.htm">

  8. <fieldset style="width=800px"> <!--套住注册表格的边框-->

  9. <legend>请输入如下的信息然后进行注册</legend>

  10. <table cellspacing="0px" cellpadding="6px" border="1px" bordercolor="black" align="center" width="600px">

  11. <tr>

  12. <td align="right">用户名:</td> <!--文本框-->

  13. <td><input type="text" size="20" style="width:150px" /></td>

  14. </tr>

  15. <tr>

  16. <td align="right">密码:</td> <!--密码框-->

  17. <td><input type="password" size="20" style="width:150px" /></td>

  18. </tr>

  19. <tr>

  20. <td align="right">确认密码:</td>

  21. <td><input type="password" size="20" style="width:150px" /></td>

  22. </tr>

  23. <tr>

  24. <td align="right">性别:</td> <!--单选框-->

  25. <td>

  26. <input type="radio" checked="checked" name="sex1" value="男" />

  27. <input type="radio" name="sex1" value="女" />

  28. </td>

  29. </tr>

  30. <tr>

  31. <td align="right">性别(可以点文字选择):</td>

  32. <td>

  33. <fieldset style="width:150px"> <!--表单外框,也可以通过css设置宽度-->

  34. <legend>请选择性别</legend>

  35. <input type="radio" checked="checked" name="sex2" value="男" id="man" />

  36. <label for="man"></label>

  37. <input type="radio" name="sex2" value="女" id="woman" />

  38. <label for="woman"></label>

  39. </fieldset>

  40. </td>

  41. </tr>

  42. <tr>

  43. <td align="right">城市:</td> <!--下拉框-->

  44. <td>

  45. <select name="city">

  46. <option value="北京">北京</option>

  47. <option value="深圳">深圳</option>

  48. <option value="上海">上海</option>

  49. <option value="南昌" selected="selected">南昌</option> <!--默认选择南昌-->

  50. </select>

  51. </td>

  52. </tr>

  53. <tr>

  54. <td align="right">城市所在区域:</td>

  55. <td>

  56. <select name="area">

  57. <optgroup label="北京"> <!--下拉框分组显示-->

  58. <option value="朝阳区">朝阳区</option>

  59. <option value="海淀区">海淀区</option>

  60. <option value="其他区">其他区</option>

  61. </optgroup>

  62. <optgroup label="南昌">

  63. <option value="东湖区">东湖区</option>

  64. <option value="西湖区">西湖区</option>

  65. <option value="青山湖区">青山湖区</option>

  66. </optgroup>

  67. </select>

  68. </td>

  69. </tr>

  70. <tr>

  71. <td align="right">交友目标:</td>

  72. <td>

  73. <select name="target" size="3" multiple="multiple"> <!--列表框-->

  74. <option value="同行" selected="selected">同行</option>

  75. <option value="普通朋友">普通朋友</option>

  76. <option value="爱人">爱人</option>

  77. </select>

  78. </td>

  79. </tr>

  80. <tr>

  81. <td align="right">爱好:</td>

  82. <td>

  83. <!--复选框,注意name属性设置一样,分组-->

  84. <input type="checkbox" name="love" value="足球" />足球

  85. <input type="checkbox" name="love" value="蓝球" />蓝球

  86. <input type="checkbox" name="love" value="乒乓球" />乒乓球

  87. </td>

  88. </tr>

  89. <tr>

  90. <td align="right">照片上传:</td>

  91. <td>

  92. <!--文件选择框-->

  93. <input type="file" name="myPic" />

  94. </td>

  95. </tr>

  96. <tr>

  97. <td align="right">自我介绍:</td>

  98. <td>

  99. <!--多行文本框-->

  100. <textarea rows="5" cols="50">

  101. </textarea>

  102. </td>

  103. </tr>

  104. <tr>

  105. <td align="center" colspan="2">

  106. <input type="submit" value="确定" />

  107. <input type="reset" value="清空" />

  108. <input type="image" src="../images/btnreg.png" onclick="alert('hello')" /> <!--演示图片按钮(会提交数据,类似submit)

  109. -->

  110. </td>

  111. </tr>

  112. </table>

  113. </fieldset>

  114. </form>

  115. </body>

  116. </html>

以上就是小编为大家带来的HTML Form表单元素全面了解的全部内容了,希望对大家有所帮助,多多支持PHP中文网~

更多HTML Form表单元素全面了解相关文章请关注PHP中文网!