HTML中的表單元素介紹

  發布時間:2022-02-26 15:51:22   作者:.NET開發菜鳥   我要評論
這篇文章介紹了HTML中的表單元素,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧

表單元素概述

表單(Form),用于收集用戶信息、提交用戶請求等

處理過程

  • 1、設計表單,并放入一些輸入域
  • 2、網站訪問者在自己的計算機上填寫上述輸入域,并提交到服務器端
  • 3、服務器處理數據并返回確認信息

其執行過程可以用下圖表示:

語法:

開始標記:必需
內容:表單域元素
結束標記:必需

主要屬性:

1、accept:文件上傳所使用的MIME類型列表。
2、action:表單提交的地址,通常是包含服務方腳本的URL。如果為空則表示向當前頁面提交。
3、method:指出表單數據提交的方式。有兩個可能值:
GET:將表單數據附加在請求中的URL上(默認方式)。
POST:將表單數據封裝在發送到服務器的請求中,比get方式安全。

作用:定義一個區域可以加入表單對象。

表單元素的基本結構:

注意:get和post方式的區別

  • 1、get是向服務器獲取/查詢數據的一種請求,post是向服務器提交數據的一種請求。
  • 2、服務器端獲取值的方法

get方式提交的數據,服務端使用request.QueryString獲取變量的值。
post方式提交的數據,服務端使用request.Form獲取數據。

  • 3、安全性

get方式的請求是把參數數據隊列附加在提交表單的ACTION屬性所指的URL后面,值和表單內各個字段一一對應,以?分割URL和傳輸數據,參數之間以&分割,由于可以在URL里面看到參數數據,所以get方式不安全。
post方式是將表單內各個字段與其內容放置在HTML HEADER一起傳送到ACTION屬性所指的URL地址,在URL里面看不到參數數據,所以post方式比較安全。
但是post方式執行效率要比get方式差一些。

  • 4、大小

URL不存在參數上限的問題,HTTP協議規范沒有對URL長度進行限制。這個限制是特定的瀏覽器及服務器對它的限制。IE對URL長度的限制是2083字節(2K+35)。對于其他瀏覽器,如Netscape、FireFox等,理論上沒有長度限制,其限制取決于操作系統的支持。
理論上講,POST是沒有大小限制的,HTTP協議規范也沒有進行大小限制,說“POST數據量存在80K/100K的大小限制”是不準確的,POST數據是沒有限制的,起限制作用的是服務器的處理程序的處理能力。
對于ASP程序,Request對象處理每個表單域時存在100K的數據長度限制。但如果使用Request.BinaryRead則沒有這個限制。
由這個延伸出去,對于IIS 6.0,微軟出于安全考慮,加大了限制。我們還需要注意:

  • 1).IIS 6.0默認ASP POST數據量最大為200KB,每個表單域限制是100KB。
  • 2).IIS 6.0默認上傳文件的最大大小是4MB。
  • 3).IIS 6.0默認最大請求頭是16KB。

IIS 6.0之前沒有這些限制。[參2]

總結:

1、get方式的安全性較post方式要差一些,所以,如果包含一些重要的信息,簡易使用post數據提交方式。
2、在做查詢統計的時候,使用get方式要更好一些;而在做數據的添加、修改或刪除操作時,建議使用post方式提交數據。

表單控件元素

表單控件元素是包含在表單元素中具有可視化外觀的HTML元素,用于訪問者輸入信息。
表單元素包括:
1、input:輸入元素。
2、textarea元素。
3、select和option。
4、其他元素。

一、input元素

input元素包括:

  • 文本域控件
  • 口令控件
  • 提交按鈕和重置按鈕
  • 復選框控件
  • 單選按鈕
  • 圖像按鈕和普通按鈕
  • 隱藏控件和文本選擇控件

根據對type屬性的不同取值,可以建立多種顯示風格的表單控件,如文本區域、口領域、復選框等。

主要屬性:
type屬性:指定表單控件的類型,可取值text、password、submit、reset、CheckBox
radio、image、button、hidden、file。
value屬性:指定表單控件的數據。
name屬性:指定該控件的名稱。

1、文本域控件

type="text"
作用:用于創建一個單行文本輸入字段
值:由訪問者自由輸入的任何文本
與input元素的其他屬性配合:
maxlength屬性可以限制輸入的字符數。
readonly屬性可以讓文本控件只讀。

示例:

例如:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>表單元素</title>
</head>
<body>
    <form method="POST">
        <div>
            名字:  <input type="text" name="姓名" value="填寫名字">
        </div>
    </form>

</body>
</html>

結果:

2、密碼框

type="password"
作用;用于創建一個單行文本輸入字段,并用*號屏蔽用戶的輸入。注意,當password輸入的數據提交時并不以任何形式加密
value值:由訪問者自由輸入的任何文本作為默認值。

示例:

例如:

<div>
           密     碼:  <input type="password">(至少包含6個字符)
</div>
<div>
           確認密碼:<input type="password">(至少包含6個字符)
</div>

結果:

3、復選框控件

type="checkbox"
作用:創建一個可以在選中和未選中之間切換的控件,當該表單提交給一個腳本進行處理時,每個被選取的復選框將返回一個與該復選框的名稱相關聯的值。
value值:選中該控件的值,可以是任意文本。(提交給服務器的是value的值)
與input元素的其它屬性配合:
要以選取狀態顯示復選框,使用checked屬性。

基本語法
<INPUT type="checkbox" name="cb2" value="talk">

建議:name和id的值一致
示例:

<body>
    <form name="form4" method="post" action="">
      愛好:
   <input type="checkbox" name="cb1" id="cb1" value="sports">
   <!--for指的是input里面的id屬性,把“運動”和復選框關聯起來,實現點擊“運動”兩字也可以選中-->
   <label for="cb1">運動</label>&nbsp;&nbsp;
   <input type="checkbox" name="cb2" id="cb2" value="talk" checked="checked">
   <label for="cb2">聊天</label>&nbsp;&nbsp;
   <input type="checkbox" name="cb3" id="cb3" value="play">
   <label for="cb3">玩游戲</label>
 </form>
</body>

例如:

<div>
            愛     好:  
            <input type="checkbox" name="sports" id="sports" checked="checked"/>
            <label for="sports"> 運動</label>
            <input type="checkbox" name="talk" id="talk" />
            <label for="talk"> 聊天</label>
            <input type="checkbox" name="play" id="play" />
            <label for="play"> 玩游戲</label>
</div>

結果:

4、單選按鈕

type="radio"
作用:創建一個單選按鈕,用于互斥地選擇某種屬性值
value值:文本,當提交form時,如果選中了此單選按鈕,那么value就被發送到服務器
name:按鈕分組
與input元素的其它屬性配合:
要以選取狀態顯示復選框,使用checked屬性

基本語法
<input type="radio" value="男" checked="checked">
注意:單選按鈕的name屬性的值必須相等,才能實現互斥的效果。

示例:

<body>
    <form name="form1" method="post" action="">
   <BR>
     性別:
        <input type="radio" name="gen" class="input" value="1" checked="checked">男&nbsp;&nbsp;
        <input type="radio" name="gen" class="input" value="2" >女&nbsp;&nbsp;
 </form>
</body>

例如:

<div>
            性     別:  
            <input type="radio" name="sex" checked="checked">男
            <input type="radio" name="sex">女
</div>

結果:

默認第一個被選中。

5、提交按鈕

type="submit"
作用:傳送表單數據給服務器端腳本或其他程序處理。
value值:按鈕的標題文字。
基本語法:
<input type="submit" name="Submit" value="提交">

例如:

<div>
      <input type="submit" value="提交" />
</div>

結果:

6、重置按鈕

type="reset"
作用:清空表單的內容并把所有表單控件設置為最初的默認值
value值:按鈕的標題文字
基本語法:
<input type="reset" name="Reset" value="重置">

注意:重置不是清空,而是把表單控件的值重置為value屬性中指定的初始值。

例如:

<div>
            <input type="submit" value="提交" />     
            <input type="reset" value="重置" />
</div>

結果:

7、圖像按鈕

type="image"
作用:創建一個圖像按鈕,用于實現用戶自定義的按鈕風格。
src屬性:指向按鈕圖片的位置。
基本語法
<input name="image" type="image" src="B7.jpg">

8、普通按鈕

type="button"
作用:用于控制執行客戶端腳本。
value值:文本,顯示在按鈕上的文字。
基本語法:
<input name="verify" type="button" value="檢查數據">

作用:

點擊按鈕,實現某種效果。

例如:

<div>
            <input type="submit" value="提交" />     
            <input type="reset" value="重置" />     
            <input type="button" value="按鈕" />
</div>

結果:

9、隱藏控件

type="hidden"
作用:用于在表單中包含不希望用戶看見的信息。
value值:文本,指派給控件的值,當用戶提交表單時,該值與其他數據一起被發送。
基本語法:
<input type="hidden" name="hiddenField">

10、文件選擇控件

type="file"
作用:上傳文件
value值:文本,要上傳的文件在本地的路徑。
基本語法
<input type="file" name="file">

例如:

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

效果:

選擇文件后的效果:

二、textarea元素

作用:建立一個多行的文本輸入區域。
基本語法:
<TEXTAREA name="textarea" cols="40" rows="6">文本框中的內容</TEXTAREA>
主要屬性:

  • cols屬性:指定文本區域的列數。
  • rows屬性:指定文本區域的行數。
  • Name屬性:指定該控件的名字
  • Readonly: 使文本區域不能編輯。

注意:cols和rows只表示頁面顯示的字符個數,如果超過,則會自動顯示相應的橫向和縱向滾動條。

例如:

<div>
            注冊條款:
            <textarea name="user" rows="3" cols="5">

            </textarea>
</div>

結果:

三、select元素

列表框元素,用于建立一個選擇菜單/列表,效果類似于C#中的ComboBox,實現下拉框的效果
語法:
開始標記:必需
內容:option元素
結束標記:必需
主要屬性:
size屬性:指定列表的高度。
multiple屬性:指定數據項可以多選。
name屬性:指定該控件的名字。

option元素

菜單項/列表項元素,代表一個選擇菜單/列表的選項
語法:
開始標記:必需
內容:文本
結束標記:可選
主要屬性:
value屬性:指定選中該項提交的值。
selected屬性:指定該項預先被選擇。

基本語法
<select name="指定列表名稱" size="行數">
<option value="可選項的值" selected>text</option>
<option value="可選項的值" >text</option>
......
</select>
說明:
size:確定列表中可同時看到的行數
selected:默認被選中的可選項
text:表示頁面上顯示的內容
value:提交給后臺的值

示例:

<div>
            出生日期:
            年:  <select >
            <option value="" selected="selected">[選擇年]</option>
            <option value=0>2015</option>
            <option value=1>2016</option>
            <option value=2>2017</option>
            <option value=3>2018</option>
            </select>  
            月:  <select >
            <option value="" selected="selected">[選擇月]</option>
             <option value=0>一月</option>
             <option value=1>二月</option>
             <option value=2>三月</option>
             <option value=3>四月</option>
             <option value=4>五月</option>
             <option value=5>六月</option>
             <option value=6>七月</option>
             <option value=7>八月</option>
             <option value=8>九月</option>
             <option value=9>十月</option>
             <option value=10>十一月</option>
             <option value=11>十二月</option>
             </select>  
            日:  <select >
             <option value="" selected="selected">[選擇日]</option>
             <option value=0>1</option>
             <option value=1>2</option>
             <option value=2>3</option>
             <option value=3>4</option>
             <option value=4>5</option>
             <option value=5>6</option>
             <option value=6>7</option>
             <option value=7>8</option>
             <option value=8>9</option>
             <option value=9>10</option>
             <option value=10>11</option>
             <option value=11>12</option>
             <option value=12>13</option>
             <option value=13>14</option>
             <option value=14>15</option>
             <option value=15>16</option>
             <option value=16>17</option>
             <option value=17>18</option>
             <option value=18>19</option>
             <option value=19>20</option>
             <option value=20>21</option>
             <option value=21>22</option>
             <option value=22>23</option>
             <option value=23>24</option>
             <option value=24>25</option>
             <option value=25>26</option>
             <option value=26>27</option>
             <option value=27>28</option>
             <option value=28>29</option>
             <option value=29>30</option>
             <option value=30>31</option>
            </select>
</div>

結果:

四、Label元素

語法:
開始標記:必需
內容:文本
結束標記:必需

如下圖所示:

主要屬性:
for:表示與該元素相聯系的控件的ID值
作用:
將文本域控件聯系在一起,將文本與控件聯系在一起后,用戶就可以單擊這個文本,效果就同單擊控件一樣。

示例:

<div>
        <label for="userName">名     字:  </label> 
        <input type="text" name="username" id="userName">
</div>
<div>
        <label>姓     氏:  <input type="text"></label>    
</div>

結果:

這樣,點擊名字或姓氏的時候,其后面的文本框會自動獲取焦點。

五 、表單高級應用

1、只讀屬性

readonly:希望某個框內的內容只允許用戶看,不能修改。

例如:給名字文本框增加value值,value值只能看,不能修改

<div>
        <label for="userName">名&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;字:&nbsp;&nbsp;</label> 
        <input type="text" name="username" id="userName" value="請輸入姓名" readonly="readonly">
</div>

結果:

2、禁用屬性

disable:因沒達到使用的條件,限制用戶使用。

例如:

<div>
         <label>姓     氏:  
                <input type="text" value="王" disabled="disabled">
         </label>    
</div>

結果:

從圖中可以看出:姓氏文本框是灰色的,表示禁用。

到此這篇關于HTML表單元素的文章就介紹到這了。希望對大家的學習有所幫助,也希望大家多多支持腳本之家。

相關文章

  • 關于html的表單元素詳解(一)

    這篇文章主要介紹了關于html的表單元素,文中講解了Action 屬性Method 屬性-下拉列表:< select > 元素-按鈕:< button> 元素等,具體操作步驟大家可查看下文
    2017-08-16
  • 關于html的表單元素詳解(二)

    這篇文章主要介紹了關于html的表單元素,通過介紹value 屬性,readonly 屬性,disabled 屬性,size 屬性,maxlength 屬性,width 屬性等詳細解釋了表單元素的組成和應用,
    2017-08-16
  • HTML Form表單元素全面了解

    下面小編就為大家帶來一篇HTML Form表單元素全面了解。小編覺得挺不錯的,現在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2016-09-26
  • HTML標記語言——表單

    點擊這里返回網頁教學網 HTML教程 欄目. 上文:標記語言——引用 原文出處 chapter 5 表單 互動性一直是互聯網的重點,讓使用者與網站能夠交換信息
    2008-10-17
  • HTML中的表單Form實現居中效果

    之前碰到一個作業,給了一張圖片,讓按照圖片樣式做一個表單,但是一直表單無法居中,在網上找了各種例子之后,終于成功,今天就來介紹一下,感興趣的可以了解一下
    2021-05-25
  • HTML如何對齊多個表單中的文本框的實現

    這篇文章主要介紹了HTML如何對齊多個表單中的文本框的實現,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一
    2020-06-18
  • html中表單提交的實現

    表單提交是常見的一種操作,這篇文章主要介紹了html中表單提交的實現,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-11-06
  • HTML 表單組件實例代碼

    本文通過實例代碼給大家介紹了HTML 表單組件的知識,非常不錯,具有參考借鑒價值,需要的朋友參考下吧
    2017-10-31
  • HTML中禁用表單控件的兩種方法readonly與disabled

    有時候我們會希望表單上的控件是不可修改的,比如在修改密碼的網頁中,顯示用戶名的文本框就應該是不可修改狀態的,下面與大家分享下禁用表中控件的兩種方法
    2014-08-24

最新評論

免费人成视频在线观看