CSS選擇框、下拉列表、文本域、表格

1.文件選擇框

<input type="file"accept="image/*>

accept：指定可選擇文件的類型。

上傳的頭像需指定對應表單的屬性

<formenctype="multipart/form-data">

2.下拉列表

優點：（1）  節省頁面空間，使得頁面更加簡潔

（2）  方便輸入

（3）  規範輸入

<selectname="province">
    <optionvalue="33">浙江</option>
    <optionvalue="41">河南</option>
    <optionvalue="32">江蘇</option>
    <optionvalue="36">江西</option>
</select>
 

<select>標籤定義一個下拉列表

<option>標籤定義下拉列表的一個選項

<select>標籤的name屬性定義了提交的參數名

<option>標籤的內容定義了該選項顯示的文本，value屬性定義了選中該選項時傳遞的參數值。

<select>標籤的size屬性定義了下拉列表框的選項個數，當小於實際選項個數時，會自動增加一個滾動條。

3.下拉列表的分組

<optgroup>的label屬性定義分組顯示的文字，disabled設置該分組不能用。

<select>                                                          
    <optgroup label="國產車">
        <option value="紅旗">紅旗</option>
        <option value="BYD">比亞迪</option>
        <option value="奇瑞">奇瑞</option>
    </optgroup>
    <optgroup label="德系車">
        <option value="奔馳">奔馳</option>
        <option value="bmw">寶馬</option>
        <option value="大衆">大衆</option>
    </optgroup>
    <optgroup label="日系車">
        <option value="本田">本田</option>
        <option value="豐田">豐田</option>
        <option value="三菱">三菱</option>
    </optgroup>
</select>

 

4.textarea:

<textarea>）（文本域）標籤定義一個多行的文本輸入區域，文本區域中可供用戶輸入大量的內容。

cols（列數）：規定文本域的列數

rows（行數）：規定文本域的行數

readonly：規定文本區域爲只讀

maxlength：規定文本域的最大字符數

autofocus：規定當前頁面時，會自動獲得焦點

 

<textarea rows="10"cols="30">

</textarea>

 

5.Fieldset（自定義字段）:

Form：規定fieldset所屬的一個或多個表單。

Name：規定fieldset的名稱。

Disabled：規定該組中的相關表單元素被禁用

Legend：對錶單中的內容加以說明，類似於標題。

 

<form action="result.html"method="get">
    <fieldset>
        <legend>個人基本信息</legend>
        姓名：<input type="text"><br>
        性別：<input type="radio">男
        <input type="radiol">女
        <br>
        年齡：<input type="text">
    </fieldset>
    <fieldset>
        <legend>教育背景</legend>
        畢業學校：<input type="text">
        所學專業: <inputtype="text">
    </fieldset>
    <fieldset>l
        <legend>職務信息</legend>
        工作單位：<input type="text">
        職務：<input type="text">
    </fieldset>
</form>

6.隱藏域

當需要想服務器傳遞參數，且該參數無需用於輸入，甚至都不想讓用戶看見，可以使用隱藏域來實現。

<form action="result.html"method="get">
    <input type="hidden"name="stuNo"value="201712312"readonly><br>
    原密碼：<input type="password"name="old">
    <br>
    新密碼：<input type="password"name="new">
    <br>
    <input type="submit"value="修改密碼">
</form>

7.表格

表格的組成部分：標題、表頭、主題、表尾

<table>定義一個表格

<caption>定義表格的標題

<thead>定義表頭部分

<tbody>定義表格主題（數據）部分

<tfoot>定義表尾，一般顯示彙總信息等。

<tr>定義一行

<th><td>定義一個數據項（單元格），<th>一般用於表頭，有加粗樣式，<td>一般用於表格主體部分，沒有加粗樣式。

<td>的rowspan和colspan分別定義單元格跨行的行數、跨列的列數。