技術標籤：html5CSShtml5CSS

表單

1、文字輸入框 input

基本格式：
<input type=" ">
較常用的型別有text(文字)、password(密碼)、radio(單選框)、checkbox(複選框)等。
例項如下：

    賬號：<input type="text">
    <br>
    密碼：<input type="password">
    <br>
    男：<input type="radio"
 
 name="sex">女：<input type="radio" name="sex">
    <br>
    愛好：<input type="checkbox">吃 <input type="checkbox">喝

結果：

注意：使用單選框時兩個選項的name屬性要相同。
小拓展：
（1）單選框與多選框可以設定預設值，只需在input標籤內加入checked="checked"或checked即可，單選框只能設定一個預設值，如果設定多個則只會執行後一個。多選框可以設定多個。

 <!-- 男：<input type="radio" name="sex">女：<input type="radio" name="sex"> -->
    <label for="man">男：</label> <input id="man" type="radio" name
 
="sex" checked="checked">
    <label for="woman">女：</label><input id="woman" type="radio" name="sex">

注：label for後的值要和input標籤的id的值保持一致。
（3）幾種狀態設定，hidden–隱藏，即只顯示在程式碼中，在頁面中不顯示；readonly–只讀，即只顯示，不允許修改；disabled–禁用，即將按鍵變成灰色，不允許點選。

2、下拉選擇框 select

程式碼例項：

    生日：
    <select name="" id="">
        <option value="">公曆</option>
        <option value="">日曆</option>
    </select>
    <select name="" id="">
        <option value="">2020</option>
        <option value="">2021</option>
        <option value="">2022</option>
    </select>年
    <select name="" id="">
        <option value="">1</option>
        <option value="">2</option>
        <option value="">3</option>
    </select>月
    <select name="" id="">
        <option value="">1</option>
        <option value="">2</option>
        <option value="">3</option>
    </select>日

結果：

小拓展：
（1）要實現在沒有點選下拉框時顯示"請選擇"字樣，點選時選項不顯示該字樣，可在每個選項最上方寫上：

請選擇

結果如圖：

（2）下拉選項框顯示在框內的預設值為選項第一行的值，要想更改的話只需要在希望顯示的值的input標籤內加上selected=“selected”即可。

3.多行文字域

表單中有自帶的多行文字域textarea
格式如下：

  <br>
    意見：<br>
    <!-- cols為橫向字元最大顯示數 rows為縱向字元最大顯示數 -->
    <textarea name="" id="" cols="30" rows="10">

    </textarea>

結果：

輸入框右下角可以放大和縮小

4、提交按鈕

有兩種格式：
1.提交
2.
結果：