技術標籤：html

HTML基礎-4

• 表單格式
• input標籤
• select標籤
• textarea標籤

表單格式

<!--
form為表單標籤
action屬性值代表觸發後目的地
method屬性規定如何傳送資料
-->
<form action="" method="">
	<input type="text" name="" value="">
</form>

※method有get和post值；
選擇get值，瀏覽器會將表單資料直接附在url後面，兩者用?分隔；

input標籤

※作用：建立各種表單需用的文字框，通過不同的type賦值實現；
※各瀏覽器顯示的文字框、單選框、複選框等內容會有所不同

<input type="" name="" value="" checked>

name屬性為提交後表單對該項資料的標記；
value屬性為預設值；
checked屬性不需要賦值，用於radio和checkbox型別，表示已選；

<input type="
 
text" maxlength="5">

text為type屬性預設值，用於輸入單行文件，可通過maxlength設定最大字元長度值;

<input type="password">

password型別的文字框與text相同，區別在於password文字框輸入的資料會以星號或原點的形式顯示；

<input type="radio" name="user">選項1
<input type="radio" name="user"
 
>選項2
<input type="radio" name="user">選項3

單選框：需特別注意，radio的機制為每個name僅可選擇一個選項，因此使用radio時需注意設定name值，否則無法實現單選功能；

<input type="checkbox" name="user">選項1
<input type="checkbox" name="user">選項2
<input type="checkbox" name="user">選項3

複選框：可同時選擇多個或者零個選項，由於提交後的資料會以?user=on&user=on&user=on#的格式上傳，因此需設定統一的name值；

<input type="submit">

提交按鈕：點選將以輸入的資料提交，可通過value設定按鈕上的文字；

<input type="reset">

重置按鈕：點選後重置已輸入的資料，可通過value設定按鈕上的文字；

<input type="file">

文字上傳按鈕：點選自動彈出選擇檔案視窗，選中後點擊submit可上傳指定檔案

<input type="imame">

圖片上傳按鈕：點選自動彈出選擇檔案視窗，選中後點擊submit可上傳指定圖片

<input type="email">

郵箱輸入文字框：與text文字輸入框相同，區別在於在提交時會自動校驗所輸入的文字是否符合郵箱格式；

<input type="url">

網址輸入文字框：與text文字輸入框相同，區別在於在提交時會自動校驗所輸入的文字是否符合網址格式；

<input type="number" min="0" max="100" step="1">

數值輸入框：可通過min和max設定數字最小和最大值，通過step設定數值間距；
注意：若取值範圍不是取值間距的整數倍時，極值部分無法通過點選按鈕獲得，例如：min=0 max=5 step=3 value=0；此時點選按鈕無法得到數值4和5

<input type="range">

滑塊：與數值輸入框類似，可通過min和max設定數字最小和最大值，通過step設定數值間距（表現為拖動時，滑塊跳躍間距）；

select標籤

<select>
	<option>選項1</option>
	<option>選項2</option>
	<option>選項3</option>
</select>

下拉選擇框；
在option標籤內設定selected設定預設項，不設定預設顯示項為第一項；
需設定value值，提交表單資料時會顯示選擇的option選項的value值，而不是option標籤內的文字；

textarea標籤

<textarea cols="" rows=""></textarea>

cols：文字框列數
rows：文字框行數