表单HTML代码

html-css09

表单HTML代码,第1张

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "

">

<html xmlns="

">

<head>

<meta http-equiv="Content-Type" content="text/html charset=utf-8" />

<title>无标题文档</title>

<style>

 h1{ color:#F00}

 p{ font-size:16px}

</style>

<script type="text/javascript">

function MM_jumpMenu(targ,selObj,restore){ //v3.0

  eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'")

  if (restore) selObj.selectedIndex=0

}

</script>

</head> <body> <h1 align="center" >会员注册</h1>

<table width="805" align="center">

      <tr>

        <td width="94" height="45" valign="middle">用&nbsp&nbsp 户&nbsp&nbsp &nbsp名:</td>

        <td colspan="4" valign="middle"><form id="form1" name="form1" method="post" action="">

          <label for="textfield"></label>

          <input type="text" name="textfield" id="textfield" width="200" height="25" />

        </form></td>

      </tr>

      <tr>

        <td height="41" valign="middle">密&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp码 :</td>

        <td colspan="4" valign="middle"><form id="form2" name="form2" method="post" action="">

          <label for="textfield2"></label>

          <input type="password" name="textfield2" id="textfield2"  width="200" height="25" />

        </form></td>

      </tr>

      <tr>

        <td height="39" valign="middle">性&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp别:</td>

        <td colspan="4" valign="middle"><form id="form3" name="form3" method="post" action="">

          <input type="radio" name="radio2" id="radio2" value="radio2"  />

          <label for="radio"></label>

          男&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp

          <input type="radio" name="radio2" id="radio2" value="radio2" />

          <label for="radio2"></label>

        女

        </form></td>

      </tr>

      <tr>

        <td height="41" valign="middle">出&nbsp生&nbsp年&nbsp月:</td>

        <td colspan="4" valign="middle"><form id="form4" name="form4" method="post" action="" >

          <label for="textfield3"></label>

          <input type="text" name="textfield3" id="textfield3" width="20" height="20" />

          年<select>

           <option>1</option>

            <option>2</option>

            <option>3</option>

            <option>4</option>

            <option>5</option>

            <option>6</option>

            <option>7</option>

            <option>8</option>

            <option>9</option>

            <option>10</option>

            <option>11</option>

            <option>12</option>

            

          </select>

        月<select>

           <option>1</option>

            <option>2</option>

            <option>3</option>

            <option>4</option>

            <option>5</option>

            <option>6</option>

            <option>7</option>

            <option>8</option>

            <option>9</option>

            <option>10</option>

            <option>11</option>

            <option>12</option>

            <option>13</option>

            <option>14</option>

            <option>15</option>

            <option>15</option>

            <option>17</option>

            <option>18</option>

            <option>19</option>

            <option>20</option>

            <option>21</option>

            <option>22</option>

            <option>23</option>

            <option>24</option>

            <option>25</option>

            <option>26</option>

            <option>27</option>

            <option>28</option>

            <option>29</option>

            <option>30</option>

            <option>31</option>

           

            

          </select>

        日

        </form></td>

      </tr>

      <tr>

        <td height="42" valign="middle">地&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp 址:</td>

        <td colspan="4" valign="middle"><form id="form5" name="form5" method="post" action="">

          <label for="textfield4"></label>

          <input type="text" name="textfield4" id="textfield4" width="200" height="25" />

        </form></td>

      </tr>

      <tr>

        <td height="38" valign="middle">爱&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp 好:</td>

        <td colspan="4" valign="middle"><form id="form6" name="form6" method="post" action="">

          <input type="checkbox" name="checkbox" id="checkbox" />

          <label for="checkbox"></label>

        体育 

        <input type="checkbox" name="checkbox2" id="checkbox2" />

        <label for="checkbox2"></label>

        旅游 

        <input type="checkbox" name="checkbox2" id="checkbox2" />

        <label for="checkbox2"></label>

        读书

        <input type="checkbox" name="checkbox2" id="checkbox2" />

        <label for="checkbox2"></label>

        电脑

        <input type="checkbox" name="checkbox2" id="checkbox2" />

        <label for="checkbox2"></label>

        音乐

        </form></td>

      </tr>

      <tr>

        <td height="41" valign="middle">上&nbsp传&nbsp形&nbsp象:</td>

        <td colspan="4" valign="middle"><form id="form7" name="form7" enctype="multipart/form-data" method="post" action="" >

          <label for="fileField"></label>

          <input type="file" name="fileField" id="fileField" width="200px" height="25px" />

        </form></td>

      </tr>

      <tr>

        <td height="99" valign="middle">个&nbsp人&nbsp简&nbsp介:</td>

        <td colspan="4" valign="middle"><form id="form8" name="form8" method="post" action="">

          <label for="textarea"></label>

          <textarea name="textarea" id="textarea" cols="45" rows="5" ></textarea>

        </form></td>

      </tr>

      <tr>

        <td height="44" valign="middle">友&nbsp情&nbsp链&nbsp接:</td>

        <td colspan="4" valign="middle"><form name="form" id="form">

          <select name="jumpMenu" id="jumpMenu" onchange="MM_jumpMenu('parent',this,0)">

            <option value="

">百度</option>

            <option value="

">网易</option>

          </select>

        </form></td>

      </tr>

      <tr>

        <td height="42" colspan="5" align="center" valign="middle"><form id="form9" name="form9" method="post" action="">

          <input type="submit" name="button" id="button" value="提交" />&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp

          <input type="reset" value="重置" />

        </form></td>

      </tr>

</table>

</body>

</html>

1、使用标签<table></table>定义网页的表格,使用style赋值类型将显示在网页。

2、使用<tr>标签定义行,使用<th>定义表头,表头的文字自动加粗。

3、<tr>和<td>标签配合,定义每行中的表格数量,现在定义3行5列的表格。

4、使用<caption></caption>定义表格的标题。

5、表格分为三个部分,表头部,表主体,表尾部。

6、表头部和主体分别放标题和表格的内容,而表的尾部通常放的是页数。

增加表单的隐藏域的html代码的type属性是inputtype等于hide。根据查询相关公开信息,隐藏域是用来收集或发送信息的不可见元素,对于网页的访问者来说,隐藏域是看不见的。当表单被提交时,隐藏域就会将信息用你设置时定义的名称和值发送到服务器上。