表單元素詳解

form標籤建立表單 塊元素

參數：

1. action:表單提交服務器地址
    若是不設置，提交是沒有反應
2. method:表單提交方式（方法）
    post 獲取信息
    get  發送信息（默認值）
3. target 提交頁面打開在何處打開
    _self  當前頁面打開
    _blank 新頁面打開
    _new   新打開一個頁面，若是是新的就不會在打開一個頁面

input

form實現方式經過input標籤

特色：單標籤 行內塊元素

默認屬性：

padding
outline 輪廓線 跟border同樣但不會影響頁面佈局

值：

value 顯示在框中的默認值
placeholder 輸入前提示框顯示的內容
name 定義信息的值
autofocus 自動聚焦
readonly 將表單設置爲只讀 數據會提交
disabled 將表單設置爲禁用 數據不會提交
autocomplete 自動補全（on off）

<input type="text"  placeholder="請輸入用戶名" name="username" autofocus autocomplete="off">

提交按鈕

<input type="submit" value="登錄">
<input type="button" value="提交">
實現效果須要JS

密碼輸入

<input type="password" name="pwd">

數字輸入

<input type="number" value="100" min="2" max="200" step="5">
value 默認值
min 最小值
max 最大值
step 步長

搜索框

<input type="search">

輸入滑塊

<input type="range"><br>

文件導入

<input type="file"><br> 單文件導入
<input type="file" multiple><br> 多文件導入

選框

單選--radio

男<input type="radio" name="six" value="boy"> 
女<input type="radio" name="six" value="girl">
name 名
value 值
單選框 ，相同name就只能選擇一個,必須指定個value值才能提交

多選--checkbox

西施<input type="checkbox" name="female" value="xi">
九尾<input type="checkbox" name="female" value="jiu">
綱手<input type="checkbox" name="female" value="gang">
鳴人<input type="checkbox" name="female" value="ming">

label 標籤

隱式的使用label

<label>兜子<input type="radio" name="six"></label>
<label>杏子<input type="radio" name="six"></label>

顯示的使用label 
    將label的for屬性設置爲跟表單控件id值同樣
<input type="checkbox" name="female" id="jiuwei">
<label for="jiuwei">九尾</label>
<input type="checkbox" name="female" id="gangshou">
<label for="gangshou">綱手</label>
<input type="checkbox" name="female" id="mingren">
<label for="mingren">鳴人</label>

select 下拉選擇

option列表 跟ul>li同理

name 提交服務器信息名
value 提交的信息值
selected 默認選中
optgroup value 分組的標題名稱

代碼

<select name="" id="">
       <optgroup label="尾獸""></optgroup>
       <option value="jiu">九尾</option>
       <optgroup label="火影"></optgroup>
       <option value="gangshou">綱手</option>
       <optgroup label="主角"></optgroup>
       <option value="mingren">鳴人</option>
       <option value="mingren">佐助</option>
       <option value=""></option>
</select>

文本輸入區域
rows 表示高
cols 表示寬

<textarea name="" id="" cols="30" rows="10"></textarea>
resize:none 設置選框不能拉伸

表單分組--fieldset
legend 分組標題

<fieldset>
        <legend>下拉框</legend>
        <select name="" id="">
            <optgroup label="尾獸""></optgroup>
            <option value="jiu">九尾</option>
            <optgroup label="火影"></optgroup>
            <option value="gangshou">綱手</option>
            <optgroup label="主角"></optgroup>
            <option value="mingren">鳴人</option>
            <option value="mingren">佐助</option>
        </select>
 </fieldset>

重置按鈕

<input type="reset">

星期輸入框-年 周

<input type="week">

日期輸入框-年月 日

<input type="date">

年月輸入框-年月

<input type="month">

時間輸入框-小時分鐘

<input type="time">

時間戳年月日小時分鐘

<input type="datetime-local">

調色版

<input type="color">