表單及表單新增元素

時間 2019-11-19

標籤表單新增元素欄目 HTML 简体版

原文原文鏈接

要想更好運用表單就要了解表單的的更多元素與屬性，首先看看對錶單基本瞭解。javascript

表單的基本瞭解

<form> 元素用於用戶輸入數據的收集css

<input> 元素是最重要的表單元素，有許多type其中<input type="submit">是用於向表單處理程序提交表單的按鈕。html

<select> 元素<option> 元素定義待選擇的下拉列表選項，java

<textarea> 元素定義文本區域。css3

<button> 元素定義可點擊的按鈕。web

表單屬性

1：Action 屬性正則表達式

action 屬性的做用是當提交表單時，聲明要向何處發送表單數據。將表單數據發往何處。若是省去該屬性則表單數據會發往當前網頁。安全

2：Method 屬性
method 屬性規定在提交表單時所用的 HTTP 方法（GET 或 POST）：post

要想表單數據提交時更加安全使用post。由於get是將表單數據放在URL後提交的。因此不要使用get傳敏感信息好比密碼。我認爲提交數據使用post，得到數據使用get。性能

3：Name 屬性
若是要正確地被提交，每一個輸入字段必須設置一個 name 屬性。由於只有設置了 name 屬性的表單元素才能在提交表單時傳遞它們的值。

4：target 屬性

target 屬性規定在何處打開 action URL。

表單新增元素屬性能讓咱們更加高效便捷的書寫代碼。

表單的新增元素與屬性

1：表單內元素的form屬性

在HTML5中能夠把表單內的從屬元素寫在頁面的任何地方，而後爲該元素指定一個form屬性，屬性值爲該表單的id，這樣就能夠把該元素指定到相應的表單中。

<form id="form1">
 <input type="text">
</form>
<textarea form="form1"></textarea>

這樣便於書寫樣式。

2：表單內元素的formaction屬性

在HTML5中formaction 屬性覆蓋 form 元素的 action 屬性。爲不一樣的提交按鈕增長formaction屬性，使得在單擊時能夠將表單能夠提交給不一樣的頁面。該屬性適用於 type="submit" 以及 type="image"。

<form action="dizhi.asp">
  <input type="submit" formaction="dizhi1.asp" value="dizhi1" />
   <input type="submit" formaction="dizhi2.asp" value="dizhi2" />
</form>

3：表單內元素的formmethod屬性

在HTML5中能夠使用formmethod屬性爲每一個不一樣的表單元素分別指定不一樣的提交方法。

<form action="dizhi.asp">
  <input type="text" name="name"/>
  <input type="submit" formaction="dizhi1.asp"  formmethod="post"/>
   <input type="submit" formaction="dizhi2.asp"  formmethod="get"/>
</form>

4：表單內元素的formenctype屬性

在HTML5中能夠使用formenctype屬性爲每一個不一樣的表單元素分別指定不一樣的編碼方式。

5：表單內元素的formtarget屬性

在HTML5中能夠使用formtarget屬性用於指定在何處打開表單提交後所須要的加載的頁面。

6：表單內元素的autofocus屬性

畫面打開時自動得到光標焦點，一個頁面上只能有一個控件具備該屬性。

7：表單元素的required屬性

HTML5中新增的required屬性能夠應用在大多數輸入元素上，在提交表單時，若是表單爲空則不容許提交。

8:表單內元素的labels屬性

在HTML5中，爲因此可以使用標籤的表單元素定義一個labels屬性，屬性值爲NodeList對象，表明該元素所綁定的標籤元素所構成的集合。

<script type="text/javascript">
function  fun(){
    var txt=document.getElementById("txt_name");
    var button=document.getElementById("btn");
    var form=document.getElementById("id1");
    if(txt.value.trim()=="")
    {
        if(txt.labels.length==1)
        {
            var label=document.createElement("label");
            label.setAttribute("for","txt_name");
            form.insertBefore(label,button);
            txt.labels[1].innerHTML="請輸入姓名";
            txtName,labels[1].setAttribute("style","font-size:9px;color:#fff");
        }
        else if(txt.labels.length>1)
        form.removeChild(txt.labels[1]);
    }
}
</script>
<form id="id1">
<label  for="txt_name">姓名：</label>
<input id="txt_name">
<input type="button" id="btn" value="驗證"  onClick="fun()"/>
</form>

9:標籤的control屬性

在HTML5中，能夠在標籤（label元素）內部放置一個表單元素，而且經過該標籤的control屬性訪問該表單元素。

<script type="text/javascript">
 function set(){
 var lbl= document.getElementById("lbl");
 var txt =lbl.control;
 txt.value="0556";
 
 }
</script>
<form>
<label  id="lbl">
  <input id="txt" maxlength="4">
</label>
<input type="button" value="恢復默認值" onClick="set()">
</form>

10:文本框的placeholder屬性

placeholder是指當文本框處於未輸入狀態時顯示的輸入提示。當文本框處於未輸入狀態且未獲取光標焦點時，模糊顯示輸入提示文字。也能夠使用css來控制其中文字的樣式。

input::-webkit-input-placeholder{ color:#0F0;}<input type="text" placeholder="輸入提示">

11:文本框的list屬性

在HTML5中爲須要的input標籤設置一個list屬性，而後在任意位置放一對 datalist 標籤，並給 datalist 標籤一個 id，和 list 屬性值i一致。

在 datalist 標籤下放列表項，每一個列表項用 option 元標籤來表示，這樣就能夠作一個下拉框，當用戶須要的值不在下拉列表中時，能夠自行輸入。datalist 標籤的內容不顯示，只有在文本框獲取焦點時纔會如下拉列表的形式表現出來。

<form action="">
 <input type="text" list="list1" name="text"  autocomplete="on"/>
 <input type="submit" />
</form>
<datalist id="list1">
 <option value="練習">練習</option>
 <option value="練習1">練習1</option>
 <option value="練習2">練習2</option>
</datalist>