form表單

HTML表單有什么作用?

<form> 元素定義 HTML 表單,作為表單的外殼把用戶輸入的不同類型的數(shù)據(jù)提交到后臺。
input標(biāo)簽

<input type="text">:定義用于文本輸入的單行輸入字段(默認(rèn)寬度為20個字符)
<input type="password">:定義密碼字段
<input type="radio">:定義單選按鈕,允許用戶在有限數(shù)量的選項中選擇一個
<input type="checkbox">:定義復(fù)選框
<input type="submit">:定義用于向表單處理程序提交表單的按鈕。
<input type="button">:定義按鈕
<input type="number">:用于應(yīng)該包含數(shù)字值的輸入字段
<input type="date">:用于應(yīng)該包含日期的輸入字段
<input type="color">:用于應(yīng)該包含顏色的輸入字段,根據(jù)瀏覽器支持,顏色選擇器會出現(xiàn)輸入字段中。
<input type="range">:用于應(yīng)該包含一定范圍內(nèi)的值的輸入字段,根據(jù)瀏覽器支持,輸入字段能夠顯示為滑動控件
<input type="month">:允許用戶選擇月份和年份,根據(jù)瀏覽器的支持,日期選擇器會出現(xiàn)在輸入字段中
<input type="week">:允許用戶選擇周和年,根據(jù)瀏覽器支持,日期選擇器會出現(xiàn)輸入字段中。
<input type="time">:允許用戶選擇時間(無時區(qū)),根據(jù)瀏覽器支持,時間選擇器會出現(xiàn)輸入字段中。
<input type="datetime">:允許用戶選擇日期和時間(有時區(qū)),根據(jù)瀏覽器支持,日期選擇器會出現(xiàn)輸入字段中。
<input type="datetime-local">:允許用戶選擇日期和時間(無時區(qū)),根據(jù)瀏覽器支持,日期選擇器會出現(xiàn)輸入字段中。
<input type="email">:用于應(yīng)該包含電子郵件地址的輸入字段,根據(jù)瀏覽器支持,能夠在被提交時自動對電子郵件地址進(jìn)行驗證。
<input type="search">:用于搜索字段(搜索字段的表現(xiàn)類似常規(guī)文本字段)。
<input type="tel">:用于應(yīng)該包含電話號碼的輸入字段,目前只有Safari 8支持該類型
<input type="url">:用于應(yīng)該包含URL地址的輸入字段,根據(jù)瀏覽器的支持,在提交時能夠自動驗證url字段。

post和get方式有說明區(qū)別

Get:是以實體的方式得到由請求URI所指定資源的信息,如果請求URI只是一個數(shù)據(jù)產(chǎn)生過程,那么最終要在響應(yīng)實體中返回的是處理過程的結(jié)果所指向的資源,而不是處理過程的描述。

image.png

ps:get附加在url中

Post:用來向目的服務(wù)器發(fā)出請求,要求它接受被附在請求后的實體,并把它當(dāng)作請求隊列中請求URI所指定資源的附加新子項,Post被設(shè)計成用統(tǒng)一的方法實現(xiàn)下列功能:
1:對現(xiàn)有資源的解釋
2:向電子公告欄、新聞組、郵件列表或類似討論組發(fā)信息。
3:提交數(shù)據(jù)塊
4:通過附加操作來擴(kuò)展數(shù)據(jù)庫
ps:說白了,就是以流的方式向服務(wù)器傳輸數(shù)據(jù)(這里有個問題:為什么顏色上傳之后#會變成%呢?

從上面描述可以看出,Get是向服務(wù)器發(fā)索取數(shù)據(jù)的一種請求;而Post是向服務(wù)器提交數(shù)據(jù)的一種請求,要提交的數(shù)據(jù)位于信息頭后面的實體中。

【備注】服務(wù)器代碼:

image.png

為什要有name:

剛才上傳的內(nèi)容也看到了,一定要是key-value 吧,既然一定要是key-value,不能只有value嘍,那就肯定有key啊,那么key就是name嘍。因為一個key只能對應(yīng)一個value,而一個value卻能由不同key共享。(不懂的話,看JavaScript對象定義),所以為什么radio和checkbox會有同樣的name也就不言而喻了。

radio如何分組

有同樣的name(原因見上文)

palceholde有什么用?

只作為提示,沒有值。內(nèi)容無法上傳到服務(wù)器。

type=hidden隱藏域有什么作用?舉例說明

標(biāo)簽<input type="hidden" name="" value="">標(biāo)簽的作用是:隱藏不想讓用戶看到的信息,但是這些信息對于Web應(yīng)用又是非常必要的。
暫存信息:后端在構(gòu)造web頁面的過程中,通過hidden隱藏域在頁面中添加了相關(guān)數(shù)據(jù)信息(用戶對網(wǎng)頁進(jìn)行操作時可能會用到這些數(shù)據(jù)信息)
信息安全:后端在構(gòu)造web頁面的過程中,可以通過hidden隱藏域在頁面中添加相關(guān)的驗證信息,當(dāng)form表單被提交后,服務(wù)器會收到該驗證信息,通過一定的算法校驗該驗證信息,可以有效防止非法請求對數(shù)據(jù)庫的增刪改查,提高了web應(yīng)用的安全性。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • 1.動手 form 表單table 表格 2. <form>表單元素 1) 簡述: 元素是塊級元素,其開始標(biāo)簽和結(jié)...
    _Dot912閱讀 2,043評論 2 8
  • 1.form表單有什么作用?有哪些常用的input 標(biāo)簽,分別有什么作用? form表單的作用是搜集用戶的輸入,用...
    淡然7698閱讀 409評論 0 0
  • 本人做php的,最近發(fā)現(xiàn)JS真的是博大精深啊,比PHP難.在HTML中,表單是由form元素來表示的,但是在jav...
    linfree閱讀 2,207評論 3 17
  • 本文介紹關(guān)于form表單的一些使用方法網(wǎng)站是如何與用戶進(jìn)行交互的?使用HTML表單。表單用于搜集不同類型的用戶輸入...
    左冬的博客閱讀 1,364評論 1 3
  • 今天第二次去電影院看了LALA LAND.本來以為第二次看的話就不會哭了,沒想到還是沒有忍住。男女主角最后那兩次的...
    擰巴擰巴得抹茶閱讀 349評論 0 3