HTML表單及其Input輸入類型

TML 表單用于搜集不同類型的用戶輸入。HTML5 Input，擁有多個新的表單輸入類型，提供了更好的輸入控制和驗證，今天將為大家帶來HTML中的表單及其input輸入類型。

一、HTML表單

1、HTML表單用于收集不同類型的用戶輸入，是一個包含表單元素的區域并且允許用戶在表單中輸入內容，比如文本域（textarea）、下拉列表、單選框（radio=buttons）、復選框（checkboxes）等。

2、表單使用標簽<form>來設置，示例：

運行結果：

二、HTML表單屬性：

1、HTML表單包含表單元素，表單元素是指不同類型的input元素、復選框、單選按鈕、提交按鈕等。

2、action屬性

在上面的示例中出現了action屬性，action屬性定義在提交表單執行的動作，向服務器提交表單的通常做法是使用提交按鈕。

通常，表單會被提交到web服務器上的網頁，上面的例子中，則指定了某個服務器腳本來處理被提交表單。

如果省略 action 屬性，則 action 會被設置為當前頁面。

3、method 屬性

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

如果表單提交是被動的（比如搜索引擎查詢），并且沒有敏感信息，使用get。

如果表單正在更新數據，或者包含敏感信息（例如密碼），使用post。

4、如果要正確地被提交，每個輸入字段必須設置一個 name 屬性，示例：

<!DOCTYPE html>

<html>

<body>

First name:<br>

<br>

Last name:<br>

</form>

<p>如果您點擊提交，表單數據會被發送到名為 demo_form.asp 的頁面。</p>

<p>first name 不會被提交，因為此 input 元素沒有 name 屬性。</p>

</body>

</html>

運行結果：

5、target 屬性

target 屬性規定提交表單后在何處顯示響應，target 屬性可設置以下值之一：

默認值為 _self，這意味著響應將在當前窗口中打開。

6、Autocomplete 屬性

autocomplete 屬性規定表單是否應打開自動完成功能。

啟用自動完成功能后，瀏覽器會根據用戶之前輸入的值自動填寫值，示例：

運行結果：

7、所有<form>屬性的列表：

三、HTML表單元素：

1、<input>元素是最重要的表單元素，有很多的形態，根據不同的type屬性，例如：

①　文本輸入（text），示例：

<!DOCTYPE html>

<html>

<body>

<form>

First name:<br>

<br>

Last name:<br>

</form>

<p>請注意表單本身是不可見的。</p>

<p>同時請注意文本字段的默認寬度是 20 個字符。</p>

</body>

</html>

運行結果：

②　單選按鈕輸入（radio），示例：

<!DOCTYPE html>

<html>

<body>

<form>

<input type="radio" name="sex" value="male" checked>Male

<br>

<input type="radio" name="sex" value="female">Female

</form>

</body>

</html>

運行結果：

③　提交按鈕（submit），示例：

<!DOCTYPE html>

<html>

<body>

First name:<br>

<br>

Last name:<br>

</form>

<p>如果您點擊提交，表單數據會被發送到名為 demo_form.asp 的頁面。</p>

</body>

</html>

運行結果：

2、<select>元素

<select>元素定義下拉列表，示例：

<!DOCTYPE html>

<html>

<body>

<option value="volvo">Volvo</option>

</select>

</form>

</body>

</html>

運行結果：

3、<fieldset>元素

<fieldset>元素組合表單中的相關數據

<legend>元素為<fieldset>元素定義標題，示例：

<!DOCTYPE html>

<html>

<body>

<legend>Personal information:</legend>

First name:<br>

<br>

Last name:<br>

</fieldset>

</form>

</body>

</html>

運行結果：

4、<textarea> 元素

<textarea> 元素定義多行輸入字段（文本域）、示例：

<!DOCTYPE html>

<html>

<body>

<form>

The cat was playing in the garden.

</textarea>

</form>

</body>

</html>

運行結果：

5、HTML5<datalist>元素

<datalist> 元素為 <input> 元素規定預定義選項列表。

用戶會在他們輸入數據時看到預定義選項的下拉列表。

<input> 元素的 list 屬性必須引用 <datalist> 元素的 id 屬性，示例：

<!DOCTYPE html>

<html>

<body>

</datalist>

</form>

</body>

</html>

運行結果：

四、HTML表單輸入類型

輸入類型	定義
text	定義供文本輸入的單行輸入字段
password	定義密碼字段
submit	定義提交表單數據至表單處理程序的按鈕
radio	定義單選按鈕
checkbox	定義復選框

<input>中的type：

類型	定義
radio	定義單選按鈕
checkbox	定義復選框
button	定義按鈕
number	用于應該包含數字值的輸入字段
date	用于應該包含日期的輸入字段
color	用于應該包含顏色的輸入字段
range	用于應該包含一定范圍內的值的輸入字段
month	允許用戶選擇月份和年份
week	允許用戶選擇周和年
time	允許用戶選擇時間（無時區）
datetime	允許用戶選擇日期和時間（有時區）
datetime-local	允許用戶選擇日期和時間（無時區）
email	用于應該包含電子郵件地址的輸入字段
search	用于搜索字段（搜索字段的表現類似常規文本字段）
tel	用于應該包含電話號碼的輸入字段
url	用于應該包含 URL 地址的輸入字段

輸入限制：

這就是有關HTML表單的大概內容了，希望這篇HTML的表單及其input輸入類型的知識點能對大家有所幫助。

、 input分類

根據顯示效果將input分為五類

文本框類：type值為text，password。
按鈕類：type值為button，reset，submit。
選框類：type值為checkbox，radio。
圖片類：type值為image。
文件類：type值為file。

二、原始顯示效果

首先我們先看一下上述各類input在瀏覽器中原始顯示效果，代碼如下

     <!-- html-->
     <p>1.文本框類</p>
    <input type="text" class="text" value="文本" />
    <input type="password" class="password" value="密碼" />
    <p>2.按鈕類</p>
    <input type="button" class="button" />
    <input type="reset" class="reset" />
    <input type="submit" class="submit" />
    <p>3.選框類</p>
    <input type="checkbox" class="checkbox" name="" id="" />
    <input type="radio" class="radio" />
    <p>4.圖片類</p>
    <!-- 此處省略了圖片地址-->
    <input type="image" class="image" src="" />
    <p>5.文件類</p>
    <input type="file" class="file" />
    <input type="hidden" class="hidden" />

在pc端各主流瀏覽器中顯示效果如下

在移動端各主流瀏覽器中顯示效果如下

三、自定義樣式（含清除默認樣式）

1. 文本框類

（1）占位文本樣式修改(placeholder)
占用文本樣式修改使用偽元素::placeholder,這偽元素雖然還是一個實驗功能，但是其實已經得到了大部分瀏覽器的支持，如果瀏覽器版本過低可以使用添加前綴來做兼容，MDN文檔給的兼容情況如下圖。

值得注意的是，該偽元素可以支持修改的屬性值有限，具體支持的屬性見下圖

（2）聚焦樣式修改（focus）
聚焦樣式修改使用偽類:focus,該偽類可以支持修改input所有的css屬性，可以放心使用
（3）常規樣式修改
常規樣式例如border，color，font-size的部分都可以直接修改。
（4）清除默認樣式
上面css屬性修改可以覆蓋掉大部分原有的樣式，從而達到清除默認樣式的效果。但是在iOS中input上不會有默認的陰影樣式覆蓋不了，需要使用-webkit-appearance: none;將其清除。
注意：在ios中還有一個與其他瀏覽器不同的地方——當input的line-height大于font-size時，輸入文字時光標長度不對，下圖所示input的line-height=3，可以看出其光標是從input最上方開始的，這樣顯然顯示效果不好，因此我們建議line-height=1，如果需要擴展input的高度，使用padding來實現。

2. 按鈕類

按鈕類input修改默認樣式比較簡單，只需要常規樣式修改和偽類修改。其中偽類:hover和:active比較常用，只要用于修改懸停樣式和點擊樣式。

3. 選框類

選框類input在不同瀏覽器中顯示效果差別很大，因此對于前端開發者來說，自定義樣式是很有必要的。
1）單選框樣式自定義
常用的辦法是隱藏原來的單選框，然后創建一個單選框。以下面代碼為例

<!-- label中for屬性值與input中id值相同即可關聯 -->
<input type="radio" class="radio" name="sex" id="male"  />
<label for="male" class="label">男</label>
<input type="radio" class="radio" name="sex" id="female" />
<label for="female" class="label">女</label>

/*css*/
/* 隱藏原有的ridio選框 */
.radio {
  display: none;
}
.label {
  position: relative; /* 作為定位基準 */
  margin-left: 20px; /* 給label左側添加margin（padding也行），給自定義radio留位置 */
}

/* 自定義radio（未選中）樣式 */
.label::before {
  display: inline-block;
  position: absolute;
  content: "";
  width: 16px;
  height: 16px;
  border: 1px solid yellowgreen;
  left: -20px;
  top: 3px; /*根據label高度和自身需求設置top*/
}

/* 自定義radio（選中）樣式 */
.radio:checked + .label::before {
  border: 1px solid skyblue;
}
.radio:checked + .label::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 100%;
  background-color: skyblue;
  left: -16px;
  top: 7px;
}

顯示效果如下圖

注意

input類元素不支持:before和:after，因此需要靠label來實現；
上例使用了相鄰選擇器來選定元素，這是上述效果得以實現的基礎（ridio和label中間不能添加其他的元素）。

上面的例子只是一種方法，如果不使用為元素，可以在radio和label中間添加一個div作為自定義的radio選框。

2）多選框樣式自定義
多選框樣式自定義與單選框自定義樣式的方式一摸一樣，如下面代碼

<!-- html -->
<input type="checkbox" class="checkbox" name="sex" id="male" />
<label for="male" class="label">男</label>
<input type="checkbox" class="checkbox" name="sex" id="female" checked />
<label for="female" class="label">女</label>
<input type="checkbox" class="checkbox" name="sex" id="undefind" checked />
<label for="undefind" class="label">不明</label>

/* css*/
/* 隱藏原有的checkbox選框 */
.checkbox {
  display: none;
}
.label {
  position: relative; /* 作為定位基準 */
  margin-left: 20px; /* 給label左側添加margin（padding也行），給自定義checkbox留位置 */
}

/* 自定義checkbox（未選中）樣式 */
.label::before {
  display: inline-block;
  position: absolute;
  content: "";
  width: 16px;
  height: 16px;
  border: 1px solid yellowgreen;
  left: -20px;
  top: 3px; /*根據label高度和自身需求設置top*/
}

/* 自定義checkbox（選中）樣式 */
.checkbox:checked + .label::before {
  border: 1px solid skyblue;
}
.checkbox:checked + .label::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 100%;
  background-color: skyblue;
  left: -16px;
  top: 7px;
}

顯示效果如下圖

4. 圖片類

這類input在平常使用較少，如果需要顯示圖片建議直接使用img標簽。

5. 文件類

目前常用的做法是使用元素（一般使用a元素）包裹住input，外層元素樣式即為此次自定義樣式，同時將input透明度設置為0，寬高與外層元素寬高一致，這樣可以保證點擊外層元素是出發input。示例代碼如下

<!-- html -->
<a href="javascript：;" class="file">
  <input type="file" name="" id="" />點擊這里上傳文件
</a>

/* css */
.file {
  padding: 4px 10px;
  height: 20px;
  line-height: 20px;
  position: relative;
  cursor: pointer;
  color: #888;
  background: #fafafa;
  border: 1px solid #ddd;
  border-radius: 4px;
  overflow: hidden;
  display: inline-block;
  zoom: 1;
}
.file input {
  position: absolute;
  opacity: 0;
  filter: alpha(opacity= 0);
  cursor: pointer;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.file:hover {
  color: #444;
  background: #eee;
  border-color: #ccc;
  text-decoration: none;
}

顯示效果如下：

注意：以上操作會隱藏上傳的文件，如果需要顯示，需要額外添加一個元素并且配合使用js用于顯示上傳的文件，在此不過多說明，有興趣的可以自行研究。

、input元素。

你會驚訝于input標簽居然可以做出這么多控件元素。

圖1

 <input type="text">
 <!-- 這是文本輸入框 -->
 <input type="password">
 <!-- 這是帶密碼的文本輸入框 -->
 <input type="radio">
 <!-- 這是單選項 -->
 <input type="checkbox">
 <!-- 這是多選項 -->
 <input type="file">
 <!-- 這是文件上傳選取項 -->
 <input type="button" value="點我吧">
 <!-- 這是按鈕 -->

二、label元素。

其實它只是一個很普通的文本元素控件，就像編程里的label一樣，只是它的for屬性有那么點意思，for屬性可以關聯其它控件，當你設置好關聯后，點擊label就會自動移動焦點到其它控件上，不好理解就看圖2圖3吧。

<label>我是一個普通的標簽</label>

圖2

圖3

在線咨詢

上一篇：前端入門-先從制作一個簡單的html5網頁開始
下一篇：oracle自動巡檢腳本生成html報告

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

HTML表單及其Input輸入類型

、 input分類

二、原始顯示效果

三、自定義樣式（含清除默認樣式）

1. 文本框類

2. 按鈕類

3. 選框類

4. 圖片類

5. 文件類

您的項目需求