HTML表單

form表單

form表單用于把用戶輸入的數(shù)據(jù)提交給后臺服務(wù)器
name表示提交的表單名稱，action表示數(shù)據(jù)提交的地址，methods表示數(shù)據(jù)提交的方式，有g(shù)et和post，默認是get

<form name="myform" action="url" method="get/post"><form>

<label>

<label> 標簽為 input 元素定義標注（標記）。
label 元素不會向用戶呈現(xiàn)任何特殊效果。不過，它為鼠標用戶改進了可用性。如果您在 label 元素內(nèi)點擊文本，就會觸發(fā)此控件。就是說，當用戶選擇該標簽時，瀏覽器就會自動將焦點轉(zhuǎn)到和標簽相關(guān)的表單控件上。

HTML表單有四種

1. <input>
2. <textarea>
3. <select>
4. <button>

<input>

1. type="text"
   單行文本輸入框
   <input type="text" maxlength=10 placehoder="請輸入用戶名">

2. type="password"
   密碼輸入框
   <input type="password" placehoder="請輸入用戶名">

3. type="checkbox"
   復(fù)選框
   <input type="checkbox"> 男
   <input type="checkbox"> 女

4. type="radio"
   單選框
   <input type="radio">

5. type="submit"
   有提交動作
   <input type="submit" value="Submit">

6. type="button"
   無提交動作
   <input type="button" value="Button">

<textarea>

多行文本輸入框

<textarea rows="行數(shù)" cols="列數(shù)">
    文本
</textarea>

<select>

創(chuàng)建單選或多選菜單

<select name="city ">
<!-- 下拉選框 -->
    <option value="beijing">北京</option>
    <option value="shanghai" selected>上海</option>
</select>

<button>

 <button>提交</button>

所有的表單元素都要放在<form>標簽里面，這樣才能確保數(shù)據(jù)信息可以提交

<form action="url" method="get/post">
    <div class="username">
        <label for="username">姓名</label>
        <!-- 如果您在label 元素內(nèi)點擊文本，就會觸發(fā)name與for相同的控件 -->
        <input type="text" name="username" placeholder="請輸入用戶名">
       <!-- placeholder提示用戶輸入內(nèi)容，focus的時候小時，blur的時候顯示 -->
    </div>
    <div class="password">
        <label for="password">密碼</label>
        <input type="password" name="password" placeholder="請輸入密碼">
    </div>
    <div class="hobby">
        <label for="hobby">愛好</label>
        <input name="hobby" type="checkbox" checked> dance
        <input name="hobby" type="checkbox"> swim
        <!-- name相同的為同一組，checked表示默認選中 -->
    </div>
    <div class="sex">
        <label>性別</label>
        <input type="radio" name="sex" value="男" checked> 男
        <input type="radio" name="sex" value="女"> 女
        <!-- name相同的為同一組，checked表示默認選中 -->
    </div>
    <textarea rows="10" cols="20">
    <!-- 多行文本輸入框，沒有value -->
    </textarea >
    <div class=" city ">
        <select name="city ">
        <!-- 下拉選框 -->
            <option value="beijing">北京</option>
            <option value="shanghai" selected>上海</option>
            <!-- selected表示默認選中此項 -->
        </select>
    </div>
    <input type="file " name="myfile " accept="image/png">
    <!-- 文件上傳 accept控制可以上傳的文件格式 -->
    <input type="hidden" name="csrf" value="12345623fafdffdd">
    <input type="button" value="Button">
    <!-- 點擊不會提交 -->

    <input type="submit" value="Submit">
    <!-- 點擊會提交 -->

    <input type="reset" value="Reset">
    <!-- 重置所有輸入 -->

   <div class="button">
       <button>提交</button>
   </div>
</form>