前端：HTML(四)---下拉框，文本域，文件域，簡單驗證，滑塊，表單的應用，表單初級驗證

• 下拉框

<!--下拉框，列表框select標籤，name屬性代表
    列表框的名字，列表框的內容使用option標籤
    selected屬性代表默認選中
-->
<p>城市：
    <select name="city">
        <option value="zz">鄭州</option>
        <option value="wh">武漢</option>
        <option value="nj">南京</option>
        <option value="sh" selected>上海</option>
    </select>
</p>

• 文本域

<!--文本域textarea
    cols="30" rows="10" 行與列
-->
<p>
    <textarea name="textarea" cols="30" rows="10">文本內容</textarea>
</p>

• 文件域

<!--文件域file,用於上傳文件等-->
<p>
    <input type="file" name="files">
</p>

• 簡單驗證

<!--郵箱驗證email，需要寫全郵箱的格式-->
    <p>郵箱：
        <input type="email" name="email">
    </p>
---------------------------------------------
<!--URL網址驗證url,需要寫全網址的正確格式-->
    <p>網址：
        <input type="url" name="url">
    </p>
---------------------------------------------
<!--數字驗證number,max最大值，min最小值
        step步長，每增加或減少多少
    -->
    <p>商品數量：
        <input type="number" name="number" max="100" min="0" step="10">
    </p>

• 滑塊

<!--滑塊range,max最大值，min最小值
        step步長，每增加或減少多少
	-->
    <p>音量：
        <input type="range" name="voice" max="100" min="0" step="1">
    </p>

• 表單的應用

<!--只讀，readonly，只能讀取，不可修改-->
    <p>姓名：
        <input type="text" name="username" value="admin" readonly>
    </p>
------------------------------------------------------------------
<!--禁用，disabled,顏色變灰，不可使用-->
    <p>
        <input type="reset" disabled>
    </p>
------------------------------------------------------------------
<!--隱藏域hidden，通過隱藏域傳遞一些默認值
        雖然隱藏了，但是值還在，例如，初始密碼等
    -->
    <p>密碼：
        <input type="password" name="pwd" value="123456" hidden>
    </p>
------------------------------------------------------------------
<!--增強鼠標可用性label,點擊文字即可選中文本框
        for屬性指向一個位置，裏面使用所要設置的
		文本框id的值
    -->
    <p>
        <label for="mark">點擊</label>
        <input type="text" id="mark">
    </p>

• 表單初級驗證

<!--文本框默認提示信息placeholder-->
    <p>
        <input type="text" name="username" placeholder="請輸入用戶名">
    </p>
-------------------------------------------------------------------
<!--非空判斷，不可爲空，required-->
    <p>
        <input type="text" name="username" required>
    </p>
-------------------------------------------------------------------
<!--正則表達驗證pattern，用到什麼查什麼-->
    <p>自定義郵箱驗證：
        <input type="text" name="diyemail"
               pattern="\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*">
    </p>

placeholder提示信息		required非空判斷		pattern正則表達驗證