HTML標籤之常見表單標籤
阿新 • • 發佈：2018-12-26
<form>標籤
<form>用於建立供使用者輸入的HTML表單。 屬性： action="" 規定表單提交時向何處傳送資料。 method="post/get" 規定傳送表單資料的HTTP方法。 name="" 表單名。 target="" 規定開啟action的url的方式。 _blank 新視窗開啟 _self 同一框架中開啟（預設） _top 整個視窗中開啟 _parent 父視窗開啟<form action="xxx.php" name="form1" method="post/get" target="_blank"></form>
<input>標籤
<input>標籤宣告允許使用者輸入資料的input控制元件，輸入資料的方式有很多，取決於type屬性。 type: number、time、year、month、data、url、email、image、range、file、search、submit、button、text、tel（電話號碼欄位）、radio、checkbox。input標籤屬性介紹：
accept屬性
規定上傳檔案伺服器接收的檔案型別，僅適用於type="file",accept屬性值有：audio/*、video/*、image/*、MIME_type。 例：當accept="image/*"<form action="xxx.php">
上傳的檔案：<input type="file" name="input1" accept="image/*"><br>
<input type="button" name="but1" value="提交">
</form>alt屬性
alt屬性規定，當type="image"時，使用者由於某些原因（如網路差、圖片路徑不正確等）無法檢視影象時，可以用alt提供替代文字。<form action="demo_form.php">
First name: <input type="text" name="fname"><br>
<input type="image" src="submit.gif" alt="Submit" width="48" height="48">
</form> autocomplete屬性 autocomplete屬性規定當在表單中輸入資料時，瀏覽器是否自動完成資料的輸入，autocomplete="on|off"。
<form action="xxx.php" name="from1" method="post" autocomplete="on">
First name:<input type="text" name="input2" autocomplete="on"><br>
Last name: <input type="text" name="input3" autocoplete="on"><br>
Email:<input type="email" name="email1"autocomplete="off"><br>
<input type="submit" name="sub1" value="提交">
</from>autofocus屬性
autofocus屬性規定當頁面載入時，<input>元素是否自動獲取焦點（聚焦）。autofocus="autofocus"或autofocus<form action="demo-form.php">
First name: <input type="text" name="fname" autofocus><br>
Last name: <input type="text" name="lname"><br>
<input type="submit">
</form>checked屬性
checked屬性規定當<input>元素的type="checkbox"或type="radio"時，是否預先選擇。水果<input type="checkbox" name="input4" checked><br>
蔬菜<input type="checkbox" name="input5"><br>
足球<input type="radio" name="input6" checked>
籃球<input type="radio" name="input6">disabled屬性
disabled發展規定是否禁用<input>元素。當<input>元素禁用時，使用者不能進行資料輸入。帳號：<input type="text" name="input7" ><br>
密碼：<input type="password" name="possword"disabled >placeholder屬性
placeholder屬性規定<input>元素提示使用者輸入資料。姓名：<input type="text" name="input8" placeholder="請輸入姓名"><br>
<input type="submit" name="sub3" value="提交">min、max屬性 規定<input>元素輸入資料的最小、最大值。
maxlength屬性
規定<input>元素中輸入資料的最大字元長度。<input type="text" name="usrname" maxlength="10">以上輸入的資料是長為10個字元，即使再輸入也沒有反應。
step屬性
step規定當<input>元素的type="number"時的有效數字間隔。<input type="number" step="3" min="0" max="20">間隔為3，點選一次，數字累積加3。
src、width、height屬性
src屬性規定了當<input>元素的type="image"時影象的源。width、height屬性規定了當<input>元素的type=“image”時影象的寬高。 First name: <input type="text" name="fname"><br>
<input type="image" src="submit.gif" alt="Submit" width="48" height="48">readonly屬性
readonly屬性規定了<input>元素中的資料為只讀模式，不能修改和輸入。姓名：<input type="text" name="inp1"><br>
號碼：<input type="text" name="inp2" value="1111" readonly><textarea>標籤
<textarea>標籤定義了多行文字輸入控制元件。 其cols、rows分別規定了文字控制元件的可見列數和行數。 <input>元素的一些屬性也適用於<textarea>元素。 wrap="hard|soft"規定了多行文字輸入中的內容是否可以換行。hard為可以換行，soft為預設（不可換行）。當確定能換行（即wrap="hard"）時，必需指定rows值。<textarea name="text1" cols="20" rows="10" wrap="hrad" autofocus>
預設內容
</textarea><select>、<option>標籤
<select>標籤定義了一個下拉列表。 <option>標籤定義下拉列表的選項。 required屬性規定了下拉列表中必須選擇一項。（目前沒有主瀏覽器支援該屬性） size屬性規定下拉列表可見選項的數目。<form action="demo_form.php">
<select required size="3">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<input type="submit">
</form>optgroup屬性規定了下拉列表中的組合。 label屬性為選項組規定描述標籤。
<select>
<optgroup label="Swedish Cars"><!--label為選項組規定描述標籤-->
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>組合更能看清選項屬於那一類：
<fieldset>標籤
<fieldset>標籤為列表繪製邊框。legend屬性定義邊框的標題。<form action="xxx.php">
<fieldset name="field1">
<legend>邊框標題</legend>
<input type="text"><br>
<input type="text"><br>
</fieldset>
</form>當沒有列表，也可以繪製一個邊框，裡面沒有內容，只有一個標題。
<form>
<fieldset>
<legend>邊框標題</legend>
</fieldset>
</form>
<datalist>標籤
<datalist>標籤規定了<input>元素可能的選項。由下拉框表示。<form action="xxx.php">
<input list="fruit" name="fru">
<datalist id="fruit">
<option value="apple">apple</option>
<option value="apple1">apple1</option>
<option value="apple2">apple2</option>
</datalist>
</form><input>的list屬性值與<datalist>的id相對應。
<label>標籤
<label>為<input>元素定義標註（標記）。 <label for="xx">文字</label> <input id="xx"> for屬性值與id對應。<p>點選其中一個文字標籤選中選項：</p>
<form action="demo_form.phpp">
<label for="male">Male</label>
<input type="radio" name="sex" id="male" value="male"><br>
<label for="female">Female</label>
<input type="radio" name="sex" id="female" value="female"><br><br>
<input type="submit" value="提交">
</form>
<label>標籤的for屬性值需與input元素的id相對應，這樣點選文字標籤才能選中選項。