HTML表單標簽

表單標簽

<form action="" method=""></form>

form 標簽為html創建一個表單

 action屬性表示表單要提交到的頁面

 method屬性表示表單數據提交時的傳輸方式  get|post

get和post的區別

1、get明文傳輸，不安全，post密文傳輸，安全

2、get最多可傳輸255個字符，post對傳輸字符去限制

文本框標簽<input />

  1.普通文本框

    <input type="text" name="" />

  2.密碼框

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

  3.單選框

    <input type="radio" name="" value="" />  注意：使用radio時name的值需要保持一致，否則不會顯示單選按鈕

  4.復選框

    <input type="checkbox" name="" value="" />

  5.圖片域

    <input type="p_w_picpath" src="" width="" height="" />

注意：圖片域自帶提交功能，在傳值時會把鼠標點擊圖片的x軸和y軸的坐標傳給下一個頁面

  6.文件域

    <input type="file" name="" />   文件上傳功能

  7.普通按鈕

    <input type="button" value="" />

  8.重置按鈕

    <input type="reset" value="" />

  9.提交按鈕

    <input type="submit" value="" />

input屬性readonly="readonly" 設置只讀

    disabled="disabled" 設置禁用

    checked="checked" 在單選按鈕和復選框中設置默認被選中

  10.下拉菜單

    <select name="">

        <option value=""></option>

        <option value=""></option>

    </select>

   在<select>標簽中selected="selected"設置被選中

 11.多行文本框

    <textarea name=""></textarea>

注意：在H4中以上必須要放在form標簽中才可被傳遞

以下是HTML5中提供的屬性

在HTML5中表單標簽可以脫離form標簽

在form標簽中寫一個ID屬性，在其他標簽中寫屬性form="form標簽中的ID值"

在H5中form新增屬性

    autocomplete  是否開啟自動完成功能  on表示開啟    off表示關閉

    novalidate="novalidate"  當屬性出現時，表示表單不進行驗證

新增表單屬性

 帶郵箱驗證的文本框

    <input type="email" name="" />

輸出一個顏色選擇器

    <input type="color" name="" />

帶數字驗證的輸入框

    <input type="number" max=35 min=15 />

    說明文本框內只能輸入15到35之間的數字

帶有日期的輸入框

    <input type="date" name="" />

帶有時間的輸入框

    <input type="time" name="" />

帶有星期的輸入框

    <input type="week" name="" />

帶有月份的輸入框

    <input type="month" name="" />

帶有可滑動滾動條的input

    <input type="range" name="" max="20" min="5" step="5" value="10">

    max  最大值   min  最小值   step  步長   value  默認值

搜索框

    <input type="search" name="ss" results="c"/>

    results="c"表示框的最前端有一個搜索圖標

帶有電話號碼段的輸入框

    <input type="tel" name="" />

驗證輸入內容為URL地址的輸入框

    <input type="url" name="" />

datalist控件

<input type="text" list="car" />
<datalist id="car">
    <option value="寶馬" />
    <option value="寶具" />
</datalist>

output輸出框

<form action="" method="" oninput="res.value=r1.value*r2.value">
   <input type="number" name="r1" />
   <input type="number" name="r2" />
   <output name="res"></output>
</form>

注意：在HTML5中input新增屬性placeholde 意思是提示語，當輸入內容是清空
                            required設置表單內容不能為空
                            autofocus自動獲得焦點
                            patten 正則表達式，輸入的內容必須匹配到指定正則

web應用標簽

<progress></progress>

<script>
<progress max="100" min="0" value="0" id="dd"></progress>
var s=document.getElementById("dd")

setInterval(function(){
		dd.value+=2
		if(dd.value==100){
			alert("安裝完成")
						}
	},500)

</script>

顯示狀態標簽<meter></meter>

max  最大值     min   最小值

low 被界定為低的值   high  被界定為高的值

optimum  

定義什么樣的度量值是最佳的值。

如果該值高于 "high" 屬性，則意味著值越高越好。

如果該值低于 "low" 屬性的值，則意味著值越低越好。

value  要度量的值

HTML的全局屬性

contenteditable   規定元素內容是否可編輯  true表示可編輯    false表示不可編輯

contextmenu   規定元素的上下文菜單。上下文菜單在用戶點擊元素時顯示

draggable  規定元素是否可拖動

dropzone    規定在拖動被拖動數據時是否進行復制、移動或鏈接。

hidden   規定元素仍未或不再相關。

spellcheck  規定是否對元素進行拼寫和語法檢查

translate  規定是否應該翻譯元素內容。

tabindex    按tab鍵光標跳轉順序