Html學習筆記6:表單

表單元素彙總:
form 表示HTML表單

input 用來表示用戶輸入數據的控件

textarea 表示可以輸入多行文本的控件

select 表示用來提供一組固定的選項

option 表示提供一個選項

optgroup 表示一組關聯的option元素

button 表示可用來提交或重置的表單按鈕,或一般按鈕

datalist 定義一組供給用戶的建議值

fieldset 表示一組表單元素

legend 表示fieldset元素的說明性標籤

label 表示表單元素的說明標籤

output 表示計算結果


表單元素解析:
1.form 定義表單

<form method="post" action="http://www.haosou.com/"> 
  <button>提交</button>
</form>

action: 表示表單提交的頁面
method: 表示表單的請求方式:有POST和GET兩種。默認GET
enctype: 表示瀏覽器對發送給服務器所採用的編碼格式。有三種:application/x-www-form-urlencoded(默認編碼,不能將文件上傳到服務器),multipart/form-data(用於上傳文件到服務器),text/plain(未規範的編碼,不建議使用,不同瀏覽器理解不同)
name:設置表單名稱,以便程序調用
target:設置提交時的目標位置:_blank , _parent , _self , _top
autocomplete:設置瀏覽器記住用戶輸入的數據,實現自動完成表單。默認爲on自動完成,如果不想自動完成則設置off
novalidate:設置是否執行客戶端數據有效性檢查,後面課程講解
//使用GET或POST提交數據

method="GET/POST"

//喪失自動提示功能

autocomplete="off"

//使用_blank新建目標

target="_blank"

2.input 表示用戶輸入數據

<input name="user">

解釋:input元素默認情況會出現一個單行文本框,有五個屬性

autofocus 讓光標聚焦在某個input元素上,讓用戶直接輸入
disable 禁用input元素
autocomplete 單獨設置input元素的自動完成功能
form 讓表單外的元素和指定的表單掛鉤提交
type
name 定義input元素的名稱,以便接收到相應的值

//聚焦光標

<input name="user" autofocus>

//禁用input

<input name="user" disabled>

//禁止自動完成

<input name="user" autocomplete="off">

//表單外的input

<form method="get" id="register">
……
</form>
<input name="email" form="register">

3.label 添加說明標籤

<p><label for="user">用戶名:<input id="user" name="user"></label></p>

解釋:label 元素可以關聯input,讓用戶體驗更好。且更加容易設置CSS樣式

4.fieldset 對錶單進行編組

<fieldset>……</fieldset>

解釋:fieldset 元素可以將一些表單元素組織在一起,形成一個整體

name 給分組定義一個名稱
form 讓表單外的分組與表單掛鉤
disable 禁用分組內的表單

5.legend 添加分組說明標籤

<fieldset>
    <legend>註冊表單</legend>
</fieldset>

解釋:legend 元素給分組加上一個標題

6.button 添加按鈕

<button type="submit"></button>

解釋:button 元素添加一個按鈕,type屬性有如下幾個值:
submit 表示按鈕的作用是提交表單,默認
reset 表示按鈕的作用是重置表單
button 表示按鈕爲一般性按鈕,沒有任何作用

//提交表單

<button type="submit">提交</button>

//重置表單

<button type="reset">重置</button>

//普通按鈕

<button type="button">按鈕</button>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章