HTML表單及其Input輸入類型

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

一、HTML表單

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

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

運行結(jié)果：

二、HTML表單屬性：

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

2、action屬性

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

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

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

3、method 屬性

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

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

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

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

<!DOCTYPE html>

<html>

<body>

First name:<br>

<br>

Last name:<br>

</form>

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

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

</body>

</html>

運行結(jié)果：

5、target 屬性

target 屬性規(guī)定提交表單后在何處顯示響應(yīng)，target 屬性可設(shè)置以下值之一：

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

6、Autocomplete 屬性

autocomplete 屬性規(guī)定表單是否應(yīng)打開自動完成功能。

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

運行結(jié)果：

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

三、HTML表單元素：

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

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

<!DOCTYPE html>

<html>

<body>

<form>

First name:<br>

<br>

Last name:<br>

</form>

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

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

</body>

</html>

運行結(jié)果：

②　單選按鈕輸入（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>

運行結(jié)果：

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

<!DOCTYPE html>

<html>

<body>

First name:<br>

<br>

Last name:<br>

</form>

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

</body>

</html>

運行結(jié)果：

2、<select>元素

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

<!DOCTYPE html>

<html>

<body>

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

</select>

</form>

</body>

</html>

運行結(jié)果：

3、<fieldset>元素

<fieldset>元素組合表單中的相關(guān)數(shù)據(jù)

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

<!DOCTYPE html>

<html>

<body>

<legend>Personal information:</legend>

First name:<br>

<br>

Last name:<br>

</fieldset>

</form>

</body>

</html>

運行結(jié)果：

4、<textarea> 元素

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

<!DOCTYPE html>

<html>

<body>

<form>

The cat was playing in the garden.

</textarea>

</form>

</body>

</html>

運行結(jié)果：

5、HTML5<datalist>元素

<datalist> 元素為 <input> 元素規(guī)定預(yù)定義選項列表。

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

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

<!DOCTYPE html>

<html>

<body>

</datalist>

</form>

</body>

</html>

運行結(jié)果：

四、HTML表單輸入類型

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

<input>中的type：

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

輸入限制：

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

站開發(fā)入門指南：表單相關(guān)標簽們。

接下來我們來學(xué)習(xí)一下表單以及相關(guān)的元素。

·表單其實英文是叫做fo.rm，在我們平時使用的這種互聯(lián)網(wǎng)產(chǎn)品中包括網(wǎng)站也好、app也好，經(jīng)常會看到這種需要你去填一些資料、填一些文字、填一些數(shù)據(jù)的這樣一種頁面。像這種頁面其實都是通過表單以及表單的元素去構(gòu)成、去實現(xiàn)的。

也就是說表單其實是用來收集用戶數(shù)據(jù)的，它是給用戶去輸入一些數(shù)據(jù)的。而且輸入完之后，一般它是要跟服務(wù)器去發(fā)生一些交互的。就是比如說把數(shù)據(jù)發(fā)送到服務(wù)器或者在本地處理過后，再給到服務(wù)器去進一步的處理或者去保存。所以其實表單這些元素，如果真正要去用起來的話，真正要讓它功能跑起來的話，其實很多時候是要跟js打交道的。所以目前來說只要簡單的去了解一下表單的元素的基本使用就可以了。

·然后后面學(xué)了CSS之后，你也知道怎么去給這些表單做它的樣式就OK了。那我們看一下表單以及相關(guān)的元素有哪些？表單主要是有一個這樣一個表單本身的標簽，另外這些就是跟它相關(guān)的一些標簽元素了。這些元素一般都是放在這個for.m元素里面的嵌套在它里面的。

但是表單的元素，它跟我們之前學(xué)過的ul li-olli一定要進行嵌套使用的，這種元素還不太一樣。表單中的元素，像這個和這個是經(jīng)常可以單獨使用的，也就是說不用嵌套在這個form表單里面也是可以用的。所以要明白這些表單內(nèi)的元素，如果你有需要是完全可以去獨立的去使用它的，并不一定要跟這個for.m.搭.配起來嵌套在它里面的。

·很多時候去使用form這樣的標簽。然后把這些表單的元素嵌套在里面。它其實主要的一個目的，它是為了讓這些就是收集到的數(shù)據(jù)組成一種結(jié)構(gòu)化的一種模式，結(jié)構(gòu)化的一種狀態(tài)。這樣發(fā)送到服務(wù)器，服務(wù)器也可以通過這種更好的結(jié)構(gòu)去讀取數(shù)據(jù)。

所以目前的學(xué)習(xí)階段來講是沒有辦法給你去展示表單的作用。但是等你學(xué)到JS之后，你在有了這些基礎(chǔ)知識之后，就能通過JS其實非常清晰看到它的整個數(shù)據(jù)結(jié)構(gòu)。這節(jié)課主要是來講一講這個標簽，這個標簽其實會經(jīng)常單獨的來進行使用。這個標簽之前也簡單的給大家去演示過，它是一個用來做這種文字輸入的標簽。

很多時候，像這種真實的產(chǎn)品頁面，產(chǎn)品里面會發(fā)現(xiàn)很多的輸入欄都是用這個標簽去實現(xiàn)。打開開發(fā)者工具之后，可以看到這里有一個這樣的小工具，選用它之后就可以去快速的定位到元素。可以看到它這邊有個input，選中之后，元素列表這里也能看到就是input這樣的元素。所以很多的頁面上的輸入框其實都是用input元素來實現(xiàn)的。

input非常重要的屬性叫做type，type屬性之前演示過一個叫text(的值)，一個叫Checkbox，給大家演示過。這兩個設(shè)置之后是會產(chǎn)生不同的效果。這種能設(shè)置的屬性的值非常多，我這里不給大家去做演示，你有興趣自己可以去嘗試去使用一下。

這里主要是介紹一個是這個之前講過的，給大家簡單也再看一下。一個是checkbox，一個是checkbox，還有一個file，其他的。

還有pasisword也給大家看一下。這里來看一下。首先看到input非常簡單，直接默認的text它這邊，這邊先把它放大一點，放五倍大，大家看起來清楚一點。這樣就可以在這里輸入這樣一個內(nèi)容了，非常簡單。

然后比如這里改成password，然后這邊輸入的東西自動的就變成這種小圓點了，就相當于是一種幫你保密，就是防止別人偷看到你的密碼。然后就是checkbox(多選框)。之前簡簡單演示過了checkbox會變成這種勾選的框，它有一個屬性，如果你使用的checkbooks這樣的類型，你可以使用這個checked這樣的屬性，就讓元素默認是打勾(選中)的狀態(tài)。

像這種東西其他的前面一般都會有一個文字，告訴你這個選項是什么，然后這里把這個改一下，就叫做選擇。想學(xué)習(xí)的語言其實一定是可以多選的。這里來一個寫一個span，叫做js好html，然后自己再多復(fù)制幾個，然后這里變成CSS，變成javascript。像這種前面這種文字用span都是沒有任何問題的。

但是其實在表單元素里面有一個標簽叫做lab.el。label其實一般用來寫這種，就是告訴這個選項是什么樣的一個選項，這樣的一些文字。label有個特殊的作用，比如說把這個換成label，label之后這里有一個屬性叫做for，for可以去跟比如說input，這里設(shè)計一個id叫做html。

稍微跟寫的不一樣，這個其實寫一樣也沒有關(guān)系，但是這里寫不一樣，大家可能更容易理解一點。

把名字id名跟這個對應(yīng)上之后for里面是某個元素的id值，就是input這樣的一個元素的id值，label就跟input元素綁定了。注意這里寫錯了label。

·然后看一下可以點擊文字，就相當于點擊了選項框，其他的用spam包裹的文字是沒有綁定的效果。所以label標簽的作用就是有這樣的一個文字跟相應(yīng)的元素綁定起來。點擊文字相當于就點擊元素這樣的效果。

·然后可以看一下另外一種叫radio這種單選框的元素，也是用input來實現(xiàn)的。然后來看一下input，把它設(shè)置成radio的類型就會變成這樣一個圓點。假如還是按照這種模式，比如說這里把ID也設(shè)置一下叫做htmltag，其實跟htmltag類型的數(shù)據(jù)庫也是一樣的。如果設(shè)置checked就默認的，就相當于是選中的狀態(tài)。

·如果這里還有單選，這里還有一個，如果叫CSS，把這個先取消掉。這里其實是有兩個選項，兩個可選項，整個的結(jié)果是希望是呈現(xiàn)單選的狀態(tài)，選中其中另外一個，肯定要呈現(xiàn)一種未選中的狀態(tài)。

·現(xiàn)在兩個都可以同時選中，這樣肯定是不行的。所以這里可以用屬性，叫做name，就叫section。下面同時也取名字，也是name同樣的值。

這里可以把它理解成用了同一個名字的單選框，他們最終只能選中其中一個。可以試一下，比如說點CSS，點html，這個東西是單選框里面非常重要的知識點。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登錄頁面</title>
    /*總體的樣式*/
    <style>
    	/*盒子樣式*/
        #box{
            width: 350px; //寬
            height: 450px; //高
            border: 1px solid black; //邊框
            border-radius: 10px; //邊框弧度
            font-family: 黑體; //字體
            letter-spacing:8px; //段間距
            word-spacing: 10px; //字間距
            line-height: 40px; //行高
            font-size: 18px; //字大小
            padding: 20px; //內(nèi)邊框
        }
        /*給'注冊'賦予樣式*/
        .register{
            width:280px ; //寬
            height: 50px; //高
            background-color: skyblue; //背景顏色
            border-radius: 10px; //邊框弧度

        }
        /*將所有邊框都改變*/
        *{
            border-radius: 5px; 邊框弧度
        }
        /*使用class選擇器，賦予number寬高和邊框*/
        .number{
            width: 185px; //寬
            height: 27px; //高
            border-width: 1px; //邊框?qū)挾?
        }
        /*id選擇器*/
        #two{
            width: 55px; //寬
            border-width: 1px; 邊框?qū)挾?        }
        /*id選擇器*/
        #phone{
            width: 103px; //寬
        }
        /*class 選擇器*/
        .boxs{
            zoom: 75%; //清除浮動
            color: darkgray; //顏色
        }
        /*class選擇器*/
        .box_a{
            width: 50px; //寬
            height: 50px; //高
            background-image: url("../image/04.jpg "); //背景圖片
            background-repeat: no-repeat; // 是否平鋪
            background-size: 50px 25px; //背景尺寸
            position: relative; //定位 相對定位
            left: 310px; //定位后左移
            bottom: 32px; //定位后下移

        }
    </style>
</head>
<body>
<div id="box">
    <h1>請注冊</h1>
<p style="color: darkgray">已有帳號?<a href="https://im.qq.com/index">登錄</a></p>
<form action="" method="post">
    <label for="name">用戶名</label>
    <input type="text" placeholder="請輸入用戶名" id="name" class="number"> <br>
    <label for="phone">手機號</label>
    <select name="" id="two" class="number">
    <optgroup>
        <option style="" class="">+86</option>
    </optgroup>
    </select>
    <input type="text" placeholder="請輸入手機號" id="phone" class="number"> <br>
    <label for="mima">密?碼</label>
    <input type="password" placeholder="請輸入密碼" id="mima" class="number"> <br>
    <label for="mima">驗證碼</label>
    <input type="password" placeholder="請輸入驗證碼" id="is" class="number">
    <div class="box_a"></div>
    <div class="boxs">
        <input type="radio" id="" class="accept">閱讀并接受協(xié)議<br>
    </div>
    <input type="submit" value="注冊" class="register" >

    </form>
</div>


</body>
</html>
在這里插入圖片描述

在線咨詢

上一篇：html中滾動字體的設(shè)置
下一篇：推薦50個超實用的 Chrome 擴展，建議收藏

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

HTML表單及其Input輸入類型

您的項目需求