WEB前端開發學習----3.HTML表單form標籤

什麼是表單？

表單就是用來蒐集不一樣類型的用戶輸入。好比咱們登陸時輸入的登陸名，密碼。再好比咱們點擊登陸按鈕，刪除按鈕等等都算是表單。

 

表單是一個包含表單元素的區域，包括文本域，下拉菜單，複選框，單選框等等。

在html文檔中，咱們使用<form></form>標籤來包含表單元素。

form標籤有兩個屬性須要注意下，一個是action， 另外一個是method。

action ="目的地"   表示將用戶輸入的數據將被傳送到指定位置。好比一個網頁。

method="get/post"  表示傳送方法，get爲默認值，數據比較少時選擇它。post通常用在大量數據，好比博客，空間日誌之類的。但若是有密碼等須要保護的數據，則應該使用post，不然數據將會顯示在瀏覽器地址欄中。

 

常常使用的表單標籤

1.輸入標籤<input type="" name="" /> 。

其中type 和 name 屬性是必須的。type決定輸入類型，好比是複選框，單選框，仍是文本域。而name是控制表單元素的，必定要記得加上，不然沒法將數據傳給後端服務器。

好比<input type="text" name="username">表示輸入類型爲文本，且將用戶的所輸入的數據以username的名字提交給後臺。若是沒有name,雖然看起來沒有錯，但用戶所輸入的數據沒有任何意義。

 

 

<input type="radio" name="sex" checked="checked" value="man" >男
<input type="radio" name="sex" value="woman" >女</td>

下面的例子表示單選按鈕，因爲name均爲sex，因此只能選擇一個。可是須要注意，用戶必須點擊原點才能夠選中，點擊文字無用。爲了提升用戶體驗，推薦使用label，好比將上例改成:

<input type="radio" name="sex2" id="man" >
<span style="white-space:pre">    </span><label for="man">男</label>
<input type="radio" name="sex2" id="woman" >
    <label for="woman">女</td>

for 用來和input關聯。但for 的值必須與id值相同。

 

 

2.選擇標籤<select name=""><option></option>.

好比

<select name="city">
<span style="white-space:pre">    </span><option value="beijing">北京</option>
    <option value="shanghai">上海</option>
    <option value="chengdu">成都</option>
    <option value="tianjin" selected="selected">天津</option>
</select>

將出現一個下拉選框，選項爲北京上海成都天津，天津衛默認選項。

 

也能夠給這些選項分組，好比

 

<select name="address">
    <optgroup label="北京">
    <option value="朝陽區">朝陽區</option>
    <option value="東城區">東城區</option>
    <option value="海淀區">海淀區</option>
    </optgroup>

 

multiple屬性能夠將其變爲能夠按ctrl/shift鍵盤複選的多選框。

3.文本域標籤<textarea rows="" cols=""></textarea>多行文本框

cols爲每行顯示的字符數，rows爲顯示的行數。

4.爲你的表單加上邊框<fieldset><legend>健康信息</legend></fieldset>

 

下面經過一個案例來實現一個交友信息的表單:

 

代碼以下：

 

<table width="700" align="center">
<tr>
<td>
    <form action="#" method="post">
        <fieldset><legend>交友信息</legend>
        <table border="1" cellpadding="10" width="600" align="center">
        <caption>交友表單</caption>
            <tr>
                <td>用戶名:</td>
                <td><input type="text" name="username" value="請輸入用戶名" maxlength="20" size="10"/></td>
            </tr>
            <tr>
                <td>密碼:</td>
                <td><input type="password" name="password" maslength="20" size="10"/></td>
            </tr>
            <tr>
                <td>確認密碼:</td>
                <td><input type="password" name="password" maslength="20" size="10"/></td>
            </tr>
            <tr>
                <td>年齡:</td>
                <td><input type="text" name="password" maslength="4" size="4"/></td>
            </tr>
            <tr>
                <td>國籍:</td>
                <td>
                    <select name="guoji">
                        <option value="waiguo">外國</option>
                        <option value="waiguo" selected="selected">中國</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>性別：</td>
                <td>
                男<input type="radio" name="sex" />
                女<input type="radio" name="sex" />
                </td>
            <tr>
            <tr>
                <td>性別(label)：</td>
                <td>
                <label for="man">男<input id="man" type="radio" name="sex" /></label>
                <label for="woman">女<input id="woman" type="radio" name="sex"/></label>
                </td>
            <tr>
            <tr>
                <td>籍貫：</td>
                <td>
                    <select name="city">
                        <optgroup selected="selected" label="河北">
                            <option value="shijiazhuang">石家莊</option>
                            <option value="shijiazhuang">石家莊</option>
                            <option value="shijiazhuang">石家莊</option>
                        </optgroup>
                        <optgroup label="河南">
                            <option value="shijiazhuang">石家莊</option>
                            <option value="shijiazhuang">石家莊</option>
                            <option value="shijiazhuang">石家莊</option>
                        </optgroup>
                        <optgroup label="河北">
                            <option value="shijiazhuang">石家莊</option>
                            <option value="shijiazhuang">石家莊</option>
                            <option value="shijiazhuang">石家莊</option>
                        </optgroup>
                    </select>
                </td>
            </tr>
            <tr>
                <td>愛好：</td>
                <td>足球<input name="aihao" type="checkbox">
                    音樂<input name="aihao" type="checkbox">
                    藝術<input name="aihao" type="checkbox">
                    足球<input name="aihao" type="checkbox">
                    足球<input name="aihao" type="checkbox">
                </td>
            </tr>
            <tr>
                <td>上傳照片：</td>
                <td><input name="pic" type="file"></td>
            </tr>
            <tr>
                <td>自我評價：</td>
                <td><textarea rows="10" cols="30"></textarea></ins></td>
            </tr>
            <tr>
                <td align="right" colspan="2">
                    <input type="submit" value="註冊" />
                    <input type="reset" value="重置" />
                    <input type="button" value="點我"  onclick="alert('hello');" />
                </td>
            </tr>
        </table>
        </fieldset>
    </form>
</td>
</tr>
</table>