CSS之表單元素

標籤：選擇   點擊   頁面   屬性工作表   北京   輸入   是什麼   pad   沒有   

 表單就是收集使用者資訊的，就是讓使用者填寫的、選擇的。

1                <div> 2                         <h3>歡迎註冊本網站</h3> 3                         <form> 4                                 所有的表單內容，都要寫在form標籤裡面 5                         </form> 6                </div>

form是英語表單的意思。form標籤裡面有action屬性和method屬性，action屬性就是表示，表單將提交到哪裡。 method屬性工作表示用什麼HTTP方法提交，有get、post兩種。

1 文字框

1        <input type="text" />

 

input表示“輸入”，指的是這是一個“輸入小組件”，

type表示“類型”，

text表示“文本”，指的是類型是一個文字框的輸入小組件。

這是一個自封閉標籤，自此，我們學習的自封閉標籤有：

1        <meta name=”Keywords” content=”” /> 2        <img src=”” alt=”” /> 3        <input type=”text” />

 

value表示“值”，value屬性就是預設有的值，文字框中已經被填寫好了：

1        <input type="text" value="預設有的值" />

 

2 密碼框

1        <input type="password" />

也就是說，input標籤很神奇，又是文字框，又是密碼框。

到底是啥？看type屬性的值是什麼，來決定。

如果type=”text”  文字框

如果type=”password” 密碼框

 

 

3 選項按鈕

 

只能選一個，術語叫做“互斥”。

1        <input type="radio" name="xingbie" /> 男 2        <input type="radio" name="xingbie" /> 女

radio是“收音機”的意思，input的type的值，如果是radio就是選項按鈕。

非常像以前的收音機，按下去一個按鈕，其他的就抬起來了。所以叫做radio。

 

選項按鈕，天生是不能互斥的，如果想互斥，必須要有相同的name屬性。name就是“名字”。

1        <input type="radio" name="xingbie" /> 男 2        <input type="radio" name="xingbie" /> 女

預設被選擇，就應該書寫checked=”checked”

1        <input type="radio" name="sex" checked="checked">

 

4 複選框

 

也是input標籤，type是checkbox。

1        <p> 2                請選擇你的愛好： 3                <input type="checkbox" name="aihao"/> 睡覺 4                <input type="checkbox" name="aihao"/> 吃飯 5                <input type="checkbox" name="aihao"/> 足球 6                <input type="checkbox" name="aihao"/> 籃球 7                <input type="checkbox" name="aihao"/> 乒乓球 8                <input type="checkbox" name="aihao"/> 打豆豆 9        </p>

複選框，最好也是有相同的name（雖然他不需要互斥，但是也要有相同的name）

 總結:

1        <input type="text" /> 文字框 2        <input type="password" /> 密碼框 1        <input type="radio"> 選項按鈕 2        <input type="checkbox" /> 複選框

5 下拉式清單

select就是“選擇”，option“選項”。

select標籤和ul、ol、dl一樣，都是組標籤。

1        <select> 2                <option>北京</option> 3                <option>河北</option> 4                <option>河南</option> 5                <option>山東</option> 6                <option>山西</option> 7                <option>湖北</option> 8                <option>安徽</option> 9        </select>

 

6 多行文字框（文本域）

text就是“文本”，area就是“地區”。

1        <textarea cols="30" rows="10"></textarea>

這個標籤，是個標籤對兒。對兒裡面不用寫東西。如果寫的話，就是這個框的預設文字。

 

cols屬性工作表示columns“列”，rows屬性工作表示rows“行”。

值就是一個數，表示多少行，多少列。

 

7 三種按鈕

按鈕也是input標籤，一共有三種按鈕：

普通按鈕：

1        <input type="button" value="我是一個普通按鈕" />

button就是英語“按鈕”的意思。value就是“值”的意思，按鈕上面顯示的文字。

 

 

提交按鈕：

1        <input type="submit" />

submit就是英語“提交”的意思。這個按鈕不需要寫value自動就有“提交”文字。

這個按鈕點擊，表單真的能提交。這個表單就會被提交到，form標籤的action屬性中的那個頁面中去。

前端開發工程師，只需要關心頁面的美、樣式、板式、互動。至於資料的儲存、讀取，都是後台工程師做的事情。（Node.js我們猴年要學，Node.js就是後台語言，到時候我們就知道怎麼把表單儲存到資料庫中了。實際上Ajax課會給大家講半天的PHP，涉及MySQL，Ajax課你就知道表單怎麼真的被提交了。）

 

重設按鈕：

1        <input type="reset" />

reset就是“複位”的意思。

 

 

 

 

至此，input的類型實際上非常多，HTML5將會變得更多。現在的階段，input的類型：

1        text 2        password 3        radio 4        checkbox 5        button 6        submit 7        reset

 

8 label標籤

本質上講，“男”、“女”這兩個漢字，和input元素沒有關係。

1        <input type="radio" name="sex" /> 男 2        <input type="radio" name="sex" /> 女

 

label就是解決這個問題的。

1        <input type="radio" name="sex" id="nan" /> <label for="nan">男</label> 2        <input type="radio" name="sex" id="nv"  /> <label for="nv">女</label>

 

input元素要有一個id，然後label標籤就有一個for屬性，和id相同，就表示綁定了，這個label和input就有綁定關係了。

 

複選框也有label：

1        <input type="checkbox" id="kk" /> 2        <label for="kk">10天內免登陸</label>

什麼表單元素都有label。

 

CSS之表單元素