表单创建及CSS

表单创建及属性

  1. input中type的值: text:文本框;password:密码框;email:电子邮箱;submit:提交;radio:单选框;checkbox:复选框;
  2. 下拉列表:select>option组合
    作业:表单创建
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>会员注册系统</title>
  8. <style>
  9. ul>li{
  10. list-style: none;
  11. }
  12. li>label>input{
  13. width: 220px;
  14. height: 30px;
  15. margin-top: 10px;
  16. font-size: 18px;
  17. /* border-radius: 5px; */
  18. }
  19. .content{
  20. width: 500px;
  21. margin: 0 auto;
  22. }
  23. .form{
  24. width: 500px;
  25. height: 500px;
  26. background-color: #f0f5f9;
  27. }
  28. .title{
  29. text-align: center;
  30. }
  31. .btn{
  32. margin-left: 100px;
  33. }
  34. .btn>input{
  35. width: 100px;
  36. }
  37. .btn>input:nth-child(2){
  38. margin-left: 100px;
  39. }
  40. .address>input{
  41. margin-top: 10px;
  42. width: 400px;
  43. font-size: 16px;
  44. }
  45. .tc{
  46. margin-top: 10px;
  47. }
  48. .tc>label{
  49. margin-right: 20px;
  50. }
  51. .add{
  52. margin-top: 10px;
  53. }
  54. .tc-box{
  55. margin-top: 10px;
  56. }
  57. </style>
  58. </head>
  59. <body>
  60. <div class="content">
  61. <div>
  62. <h2 class="title">会员注册系统</h2>
  63. </div>
  64. <div class="form">
  65. <form action="" method="get">
  66. <ul>
  67. <li>
  68. <label>用&nbsp户&nbsp&nbsp名:
  69. <input type="text" name="username" placeholder="请输入新用户名" autofocus id="">
  70. </label>
  71. </li>
  72. <li>
  73. <label>密&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp码:
  74. <input type="text" name="username" placeholder="请输入新用户名的密码" autofocus id="">
  75. </label>
  76. </li>
  77. <li>
  78. <label>联系电话:
  79. <input type="text" name="" placeholder="请输入联系电话" id="">
  80. </label>
  81. </li>
  82. <li>
  83. <label>电子邮箱:
  84. <input type="email" name="" id="" placeholder="请输入电子邮箱地址">
  85. </label>
  86. </li>
  87. </ul>
  88. <ul>
  89. <fieldset>
  90. <div class="fdt">
  91. <legend>个人信息</legend>
  92. <label>性别:
  93. <input type="radio" name="gender" value="man" id="">
  94. </label>
  95. <label>
  96. <input type="radio" name="gender" value="woman" id="">
  97. </label>
  98. <div class="add">
  99. <label>现居住址:省份
  100. <select name="" id="">
  101. <option value="" selected>四川省</option>
  102. <option value="">浙江省</option>
  103. <option value="">广东省</option>
  104. <option value="">湖南省</option>
  105. </select>
  106. </label>
  107. <label>城市
  108. <select name="" id="">
  109. <option value="" selected>成都市</option>
  110. <option value="">内江市</option>
  111. <option value="">绵阳市</option>
  112. <option value="">南充市</option>
  113. <option value="">简阳市</option>
  114. <option value="">眉山市</option>
  115. <option value="">自贡市</option>
  116. </select>
  117. </label>
  118. <label>区县
  119. <select name="" id="">
  120. <option value="" selected>青白江区</option>
  121. <option value="">武侯区</option>
  122. <option value="">金牛区</option>
  123. <option value="">青羊区</option>
  124. <option value="">天府新区</option>
  125. <option value="">金堂县</option>
  126. <option value="">成华区</option>
  127. </select>
  128. </label>
  129. <div class="address">
  130. <input type="text" placeholder="请输入详细地址">
  131. </div>
  132. <div class="tc">
  133. <span>特长:</span>
  134. <div class="tc-box">
  135. <label>
  136. <input type="checkbox" name="tc[]" id="">office软件
  137. </label>
  138. <label>
  139. <input type="checkbox" name="tc[]" id="">AutoCAD
  140. </label>
  141. <label>
  142. <input type="checkbox" name="tc[]" id="">Photoshop
  143. </label>
  144. <label>
  145. <input type="checkbox" name="tc[]" id="">网络组建
  146. </label>
  147. </div>
  148. </div>
  149. </div>
  150. </div>
  151. </fieldset>
  152. </ul>
  153. <div class="btn">
  154. <input type="button" value="提交">
  155. <input type="button" value="重置">
  156. </div>
  157. </form>
  158. </div>
  159. </div>
  160. </body>
  161. </html>