HTML - 表單

一、表單標(biāo)簽（form）

首先我們先寫一個(gè)<form></form>的標(biāo)簽雄卷，form標(biāo)簽屬于表單標(biāo)簽搓蚪，通常我們的登錄注冊(cè)界面都是有提交數(shù)據(jù)的，是和服務(wù)器交互用的丁鹉，用戶在提交信息后妒潭，給服務(wù)器，服務(wù)器再根據(jù)提交的信息保存揣钦，這個(gè)時(shí)候就需要form標(biāo)簽了雳灾。
form標(biāo)簽里面常見屬性有兩種：
action: 這個(gè)是表單提交給某服務(wù)器的地址。
method: 用什么方式提交冯凹。通常我們常見的是：get和post這兩種谎亩，區(qū)別就是用戶在寫信息時(shí)顯示的是明文還是暗文。

1：Get: 提交有長度限制宇姚，并且編碼后的內(nèi)容地址欄可見匈庭。（不安全，少用）

<form action="指向交給誰,網(wǎng)頁地址" method="get"/>
//傳遞的值是有長度限制的浑劳。瀏覽器的地址欄里面可以看到阱持，特殊時(shí)用。

2：Post: 提交無長度限制呀洲，并且編碼后內(nèi)容不可見紊选。

<form action="指向交給誰,網(wǎng)頁地址" method="post"/>
//傳遞的值沒有長度限制，瀏覽器的地址欄里面不可以看到道逗，常用兵罢。

如下例：

<form action="http://www.baidu.com" method="get">
</form>

111.jpg

二、文本輸入

//文本框
<input tyfe="text做文本框的" name="用戶名" value="值"/>

//密碼框滓窍，可以讓用戶輸入的密碼顯示為黑點(diǎn)卖词。
<input tyfe="password" name="名字" value="值"/>

//隱藏域，這個(gè)提交表單是可以提交的，但是用戶是看不到的此蜈。
<input tyfe="hidden" name="名字" value="值"/>

//文本域(多行文本)即横，非常大的區(qū)域，用戶可以在里面寫文章裆赵。
<textarea name="名字" cols="字符多少" rows="幾行高"</textarse>

1东囚、用戶注冊(cè)

先做一個(gè)用戶注冊(cè)界面，我們用文本框的方式進(jìn)行編寫：

<form action="http://www.baidu.com" method="get">
  <table>
     <tr>        
       <td>用戶名：</td>
       <td>
          <input type="text" name="user" value=""/>
       </td>
     </tr>
   </table>
</form>

222.jpg

因?yàn)橹粚懥艘粭l战授，整個(gè)表單的框還是看不出來的页藻。

2、密碼框

<tr>        
   <td>密碼：</td>
   <td>
       <input type="password" name="pw" value=""/>
   </td>
</tr>

333.png

3植兰、確認(rèn)密碼

和密碼框是一樣的份帐。屬于常用步驟。

三楣导、選擇框

1废境、單選框（性別選項(xiàng)）

<tr>
  <td>性別：</td>
  <td>
    <input type="radio" name="sex"  id="man1" value="1" />
    <label for="man1">男</label>
    <input type="radio" name="sex" id="man2" value="0" />
    <label for="man2">女</label>
  </td>                
</tr>

333.jpg

444.jpg

2、復(fù)選框

做一個(gè)類似于愛好類型的：

<tr>
  <td>愛好：</td>
  <td>
    <input id="a1" type="checkbox" name="love" value="a" />
    <label for="a1">抽煙</label>
    <input id="b1" type="checkbox" name="love2" value="b" />
    <label for="b1">喝酒</label>
    <input id="c1" type="checkbox"  name="love3" checked="checked" value="c"/>
    <label for="c1">美女</label>
  </td>
</tr>

555.jpg

666.jpg

四筒繁、下拉列表框

下拉列表標(biāo)簽：<select></select>
<selet name="名字" size="等于1時(shí)為列表" multiple="multiple"多選的意思/>
民族為列：

<tr>
  <td>民族：</td>
  <td>
    <select name="nation">
      <option value="1" selected>漢族</option>
      <option value="2">滿族</option>
      <option value="3">苗族</option>
      <option value="4">回族</option>
      <option value="5">彝族</option>
      <option value="6">傣族</option>
    </select>
  </td>
</tr>

77.jpg

888.jpg

五噩凹、按鈕

//1、普通按鈕
<input type="button" name="按鈕名字" value="值"/>

//如果想讓用戶讀不到膝晾，那么可以添加一下：
<input type="button" name="按鈕名字" disabled="disabled" value="值"/>

//2栓始、提示按鈕
<input type="submit" name="按鈕名字" valer="值"/>

//如果想讓用戶讀不到，那么可以添加一下：
<input type="submit" name="按鈕名字" disabled="disabled" value="值"/>

//3血当、重置按鈕
<input type="reset" name="按鈕名字" valer="值"/>

//如果想讓用戶讀不到幻赚，那么可以添加一下：
<input type="reset" name="按鈕名字" disabled="disabled" value="值"/>

//4、圖片按鈕
<input type="image" name="按鈕名字" src="圖片地址"/>

//如果想讓用戶讀不到臊旭，那么可以添加一下：
<input type="image" name="按鈕名字" disabled="disabled" src="圖片地址">

注冊(cè)按鈕例：

<tr>
  <td colspan="2">
    <input type="submit" value="注冊(cè)" />
    <input type="reset" value="重置" />
    <input type="image" src="HTML/1.gif" />
  </td>
</tr>