整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
.HTML中表單元素的基本概念
HTML表單是HTML元素中較為復(fù)雜的部分,表單往往和腳本,動(dòng)態(tài)頁面,數(shù)據(jù)處理等功能相結(jié)合,因此是制作動(dòng)態(tài)網(wǎng)站很重要的內(nèi)容.
表單一般用來收集用戶的輸入信息
2.表單工作原理
訪問者在瀏覽有表單的網(wǎng)頁時(shí),可填寫必需的信息,然后按某個(gè)按鈕提交,這些信息通過網(wǎng)絡(luò)傳送到服務(wù)器上.服務(wù)器上專門的程序?qū)@些數(shù)據(jù)進(jìn)行處理,如果有錯(cuò)誤會(huì)返回錯(cuò)誤信息,并要求糾正錯(cuò)誤.當(dāng)數(shù)據(jù)完整無誤后,服務(wù)器反饋一個(gè)輸入完成的信息
3.表單的功能
功能:表單用于向服務(wù)器傳輸數(shù)據(jù),從而實(shí)現(xiàn)用戶與WEB服務(wù)器的交互表單能夠包含input系統(tǒng)標(biāo)簽,比如文本字段,復(fù)選框,單選框,提交按鈕等表單還可以包含textarea,select,fieldset,label標(biāo)簽.
4.表單的常用類型及說明
1.表單常用的類型有:
2.表單屬性：
3.文本輸入框(text)：
當(dāng)用戶要在表單中輸入字母,數(shù)字內(nèi)容時(shí),就會(huì)用到文本域
代碼如下:
注意,表單本身并不可見.同時(shí),在大多瀏覽器中,文本域的缺省寬度是20個(gè)字符.
在密碼域中輸入的字符,瀏覽器將使用項(xiàng)目符號(hào)來代替這些字符.
4.單選按鈕(radio)：
當(dāng)用戶從若干給定的選擇中選取一個(gè)選項(xiàng)時(shí),就會(huì)用到單選框.
代碼如下:
用戶只能從眾多選擇中選取一個(gè)選項(xiàng).當(dāng)用戶點(diǎn)擊一個(gè)單選按鈕時(shí),該按鈕會(huì)變?yōu)檫x中狀態(tài),其他所有按鈕會(huì)變?yōu)榉沁x中狀態(tài).
5.復(fù)選框(checkboxes)
當(dāng)用戶需要從若干給定的選擇中選取一個(gè)或多個(gè)選項(xiàng)時(shí),就會(huì)用到復(fù)選框
代碼如下:
用戶一次可以選擇多個(gè)選項(xiàng).6.重置按鈕(reset)
重置按鈕會(huì)清除當(dāng)前頁面上的用戶輸入的所有數(shù)據(jù),把當(dāng)前頁面恢復(fù)到打開時(shí)的樣子.
代碼如下:
<form><p><input type="reset"></p></form>
7.提交按鈕
會(huì)在當(dāng)前頁面生成一個(gè)提交按鈕,用戶點(diǎn)擊此按鈕,瀏覽器就會(huì)把當(dāng)前頁面用戶輸入的數(shù)據(jù)傳送到服務(wù)端
代碼如下:
<form><p><input type="button" value="按鈕"/></p></form>
8.提交文件
當(dāng)需要把客戶端的文件發(fā)送到服務(wù)端時(shí),需要用到提交文件按鈕
代碼如下:
<form action="/index/" method="post"><p><input type="file"/></p></form>
上傳文件注意兩點(diǎn): 請(qǐng)求方式必須是post enctype="multipart/form-data"
9.下拉菜單
當(dāng)需要用戶從很多選項(xiàng)中選擇一個(gè)或多個(gè)選項(xiàng)時(shí),也可以使用下拉列表.
代碼如下:
這樣的下拉列表,用戶只能從其中選擇一個(gè)選項(xiàng),當(dāng)需要用戶選擇兩個(gè)或以下時(shí),可以添加參數(shù)來進(jìn)行控制.代碼如下:
還可以在OPTION
中添加selected="selected"
選項(xiàng)來設(shè)置默認(rèn)值.10.表單屬性
1.action屬性的說明:
使用action選項(xiàng)來指定服務(wù)端的腳本來處理被提交的表單
<form action="/index/" method="post">
如果省略action屬性,則action會(huì)被設(shè)置為當(dāng)前頁面
2.method屬性的說明:
method屬性規(guī)定在提交表單時(shí)所用的http方法(POST或GET)
<form action="/index/" method="post">
或
<form action="/index/" method="get">
3.get方法或post方法的使用方式說明:
如果表單提交是被動(dòng)的(比如搜索引擎查詢),并且沒有敏感信息.
當(dāng)使用get方法時(shí),表單的數(shù)據(jù)在頁面地址欄中是可見的
因此,get最適合少量數(shù)據(jù)的提交,瀏覽器會(huì)設(shè)定容量限制
如果表單正在更新數(shù)據(jù),或者包含敏感信息(比如密碼)時(shí)應(yīng)該使用post,post的安全性更好.
因?yàn)樵陧撁娴刂窓谥斜惶峤坏臄?shù)據(jù)是不可見的.
切圖 qietu(.com)
tml表單元素-html教程
表單元素文本類：
123456
表單元素-按鈕類：
復(fù)選框與單選框：
你的愛好是:
吃飯
睡覺
打豆豆
你的性別是：
男
女
文件選擇：
下拉列表與下拉框：div+css,html學(xué)習(xí),html入門
iframeset：
iframe：
[成笑笑博客]SEO中DIV+CSS命名規(guī)則-seo教程
[成笑笑博客]HTML標(biāo)簽概述-html教程
CSS樣式表知識(shí)總結(jié)-css教程
html5和html4之間的區(qū)別-html5教程
TML:完成頁面的內(nèi)容展示
CSS：完成頁面樣式的控制，美化頁面，完成頁面的布局。
表單：用于采集用戶輸入的數(shù)據(jù)。用于和服務(wù)器進(jìn)行交互。
form:用于定義表單的。可以定義一個(gè)范圍(代表用戶采集數(shù)據(jù)的范圍)
屬性：action:指定提交數(shù)據(jù)的url(指的就是把數(shù)據(jù)提交到哪里)
method:指定提交方式
分類：一共有7種，2種比較常用。
get:1.請(qǐng)求參數(shù)會(huì)在地址欄顯示
2.請(qǐng)求參數(shù)的長(zhǎng)度是有限制的。
3.請(qǐng)求不安全
post:1.請(qǐng)求參數(shù)不會(huì)在地址欄顯示，會(huì)封裝在請(qǐng)求體中。
2.請(qǐng)求參數(shù)的長(zhǎng)度沒有限制
3.較為安全
表單里面的數(shù)據(jù)要想被提交，必須指定它的name屬性
表單項(xiàng)標(biāo)簽
input:可以通過type屬性值，改變?cè)卣故镜臉邮健?/p>
type屬性：text:文本輸入框，默認(rèn)值
placeholder:指定輸入框的提示信息，當(dāng)輸入框的內(nèi)容發(fā)生變化，會(huì)自動(dòng)情況提示信息。
password:密碼輸入框
radio：1.單選框(要想讓多個(gè)單選框?qū)崿F(xiàn)單選的效果，則多個(gè)單選框的name屬性值必須一樣)
2.一般會(huì)給每一個(gè)單選框提供value屬性，指定其被選中后提交的值。
3.checked屬性可以指定默認(rèn)值
checkbox:復(fù)選框:
1.一般會(huì)給每一個(gè)單選框提供value屬性，指定其被選中后提交的值。
2.checked屬性可以指定默認(rèn)值
file:文件選擇框
hidden:隱藏域，用于提交一些信息
按鈕:
submit:提交按鈕。可以提交表單
button:普通按鈕
image:圖片提交按鈕
src屬性指定圖片的路徑
label:指定輸入項(xiàng)的文字描述信息
注意：lable的for屬性一般會(huì)和input的id屬性值對(duì)應(yīng)。如果對(duì)應(yīng)了，點(diǎn)擊lable區(qū)域，會(huì)讓input輸入框獲取焦點(diǎn)。
select:下拉列表
子元素：option,指定列表項(xiàng)
textarea:文本域
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
