Form Element

form

form: 用於為使用者輸入建立 HTML 表單。用於向伺服器傳輸資料。

Attributes

<form action="demo-form.php">
  First name: <input type="text" name="FirstName" value="Mickey" /><br />
  Last name: <input type="text" name="LastName" value="Mouse" /><br />
  <input type="submit" value="提交" />
</form>
 

fieldset

fieldset: 將表單內的相關元素分組

• <fieldset> 標籤會在相關表單元素周圍繪製邊框。
• 提示：<legend> 標籤為 <fieldset> 元素定義標題。
• form 屬性規定 fieldset 所屬的一個或多個表單，屬性的值必須是所屬表單的 id。

Attributes

<form action="/example/html5/demo_form.asp" method="get" id="iceform">
  你喜歡什麼口味的冰激凌？<input type="text" name="icecream" /><br />
  <input type="submit" />
</form>
<fieldset form="iceform">
  <legend>Personalia:</legend>
  Name: <input type="text" name="usrname" /><br />
</fieldset>
 

label

label: 規定 label 與哪個表單元素繫結。

<!-- 顯式的聯絡 -->
<label for="SSN">Social Security Number:</label>
<input type="text" name="SocSecNum" id="SSN" />

<!-- 隱式的聯絡 -->
<label>Date of Birth: <input type="text" name="DofB" /></label>

input

input: 用於蒐集使用者資訊。

• 根據不同的 type 屬性值，輸入欄位擁有很多種形式。輸入欄位可以是文字欄位、複選框、掩碼後的文字控制元件、單選按鈕、按鈕等等。

Attributes

textarea

textarea: 定義一個多行的文字輸入控制元件。

• 特有屬性：[rows | cols | wrap];wrap 有兩個值：hard & soft

<textarea name="introduce" cols="10" rows="2"></textarea>

option

• 特有屬性： [ selected ]

select

select: 建立下拉列表。

• 特有屬性：[multipe | size ]

select,
input[type="text"] {
  width: 200px;
  padding: 10px;
}

<select name="course">
  <!-- <option value="--please select course--" >--please select course--</option> -->
  <optgroup label="Web">
    <option value="HTML">HTML</option>
    <option value="CSS" selected>CSS</option>
    <option value="JS">JS</option>
  </optgroup>
  <optgroup label="Server">
    <option value="JAVA">JAVA</option>
    <option value="PHP">PHP</option>
  </optgroup>
</select>

• select 相關的 js：
  • new Option(text,value)

    document.querySelector("select").options.add(new Option("txt", "val"));
    

  • options.length

    document.querySelector("select").options.length;
    

  • 修改選中值

    document.querySelector("select").options[3].selected = true;
    

  • 查詢選中的索引

    document.querySelector("select").selectedIndex;
    

  • 查詢選中值

    document.querySelector("select").value;
    document.querySelectorAll("option")[
      document.querySelector("select").selectedIndex
    ].value;
    

• select 相關的 css：
  select 框的樣式可以修改，option 的樣式不好改

datalist

datalist: 規定了 <input> 元素可能的選項列表。

• list 屬性引用 <datalist> 元素，其中包含 <input> 元素的預定義選項。

<input type="text" placeholder="--please select course--" list="course" />
<datalist id="course">
  <option value="HTML">HTML</option>
  <option value="CSS" selected>CSS</option>
  <option value="JS">JS</option>
  <option value="JAVA">JAVA</option>
  <option value="PHP">PHP</option>
</datalist>

• datalist 相關的 js：
  • new Option(text,value)

    let newEl = document.createElement("option");
    newEl.setAttribute("value", "test");
    newEl.innerHTML = "test";
    document.querySelector("datalist").appendChild(newEl);
    

  • options.length

    document.querySelector("datalist").options.length;
    

  • 修改選中值

    document.querySelector("[type='text']").value =
      document.querySelector("datalist").options[1].value;
    

  • 查詢選中值

    document.querySelector("[type='text']").value;
    

時間

特有屬性： max ,min ,step ,value 可以設定預設值

<input type="date" placeholder="date" />
<input type="datetime" placeholder="datetime" />
<input type="datetime-local" placeholder="datetime-local" />
<input type="month" placeholder="month" />
<input type="week" placeholder="week" />
<input type="time" placeholder="time" />

• 修改日期控制元件的樣式
  ::-webkit-datetime-edit – 控制編輯區域的
  ::-webkit-datetime-edit-fields-wrapper – 控制年月日這個區域的
  ::-webkit-datetime-edit-text – 這是控制年月日之間的斜線或短橫線的
  ::-webkit-datetime-edit-month-field – 控制月份
  ::-webkit-datetime-edit-day-field – 控制具體日子
  ::-webkit-datetime-edit-year-field – 控制年文字, 如 2017 四個字母佔據的那片地方
  ::-webkit-inner-spin-button – 這是控制上下小箭頭的
  ::-webkit-calendar-picker-indicator – 這是控制下拉小箭頭的
  ::-webkit-clear-button –這是控制清除按鈕的

• 年份[1-99999],月份[1,12],周[1,53],日期[1,31],小時[0,23],分鐘[0,59]
• 2 月的日期不會只能調整，上限依舊是 31
• value 屬性可以返回選擇的日期，格式是字串
• time 設定 step="非 60 倍數"的可以具體到秒輸入
• max，min 的設定不一定有效
• [type='datetime']不一定支援

按鈕

<input type="button" value="button" />
<input type="submit" value="submit" />
<input type="reset" value="reset" />
<input type="image" src="../image/o_200723013825miku1.png" placeholder="image" />

• [type='image']一般 src 和 alt 需要結合使用，如果圖片不顯示則顯示 alt 的內容。
• [type='image']本質是 submit 按鈕

文字

<input type="text" placeholder="text" />
<input type="password" placeholder="password" />
<input type="tel" placeholder="tel" />
<input type="url" placeholder="url" />
<input type="email" placeholder="email" />

• password 的輸入會被掩碼，更改[type='password']的 type 為[type="text"]可以明碼顯示
• 在觸屏端點選[type='tel']的輸入框時，跳出的虛擬鍵盤為電話鍵盤（1-9、*、#）。

選擇按鈕

特有屬性： name, checked ,value;根據 name 值給選擇按鈕分組，根據 value 值返回選擇內容

<input type="checkbox" placeholder="checkbox" />
<input type="radio" placeholder="radio" />

檔案

特有屬性： accept, capture ,files，multiple;

<input type="file" placeholder="file" />

• accept：MIME 型別，允許哪種格式的檔案；例如"accept="image/*"
• capture: 如果 accept (en-US) 屬性指出了 input 是圖片或者視訊型別，則它指定了使用哪個攝像頭去這些資料。值 user 表示應該使用前置攝像頭和/或麥克風。值 environment 表示應該使用後置攝像頭和/或麥克風

顏色

<input type="file" placeholder="file" />

• value 返回的值是十六進位制顏色碼

數值

特有屬性： max, min ,step;

<input type="number" placeholder="number" />
<input type="range" placeholder="range" />

• 修改[type='range']控制元件的樣式：
  ::-webkit-slider-thumb,::-moz-range-thumb：滑塊(thumb)
  ::-webkit-slider-runnable-track,::-moz-range-track：滑動軌道(track)
  ::-moz-range-progress：填充進度條
  • IE9
    ::-ms-track 滑動軌道，::-ms-thumb：滑塊，::-ms-fill-lower：已填充部分，::-ms-fill-upper：未填充部分
    詳情可參考：https://blog.csdn.net/weixin_38930535/article/details/79542130

搜尋

<input type="search" placeholder="search" />

• 修改[type='search']控制元件的樣式：
  ::-webkit-input-placeholder：placeholder 佔位符
  ::-webkit-search-cancel-button：預設的取消按鈕
  蘋果 6 ios10 的搜尋框是橢圓形，可以用下面語句去除：

  input[type="search"] {
    -webkit-appearance: none; //去除ios下input 橢圓形
  }
  

• [type="search"]必須在含有 action 屬性的 form 裡面，虛擬鍵盤的 Done 鍵才會變成 Search 鍵

隱藏

<input type="hidden" placeholder="hidden" />

• 收集或傳送資訊