HTML表單和組件

表單

基本所有的網頁無非就是在做兩件事情：1.呈現數據給客戶看，2.接收用戶輸入的數據。所以表單就是用來收集用戶輸入的數據，然后提交給服務器。

示例圖：

表單在網頁中主要負責數據采集功能，一個表單有三個基本組成部分：

1.表單標簽：這里面包含了處理表單數據所用CGI程序的URL以及數據提交到服務器的方法。

2.表單域：包含了文本框、密碼框、隱藏域、多行文本框、復選框、單選框、下拉選擇框和文件上傳框等。

3.表單按鈕：包括提交按鈕、復位按鈕和一般按鈕；用于將數據傳送到服務器上的CGI腳本或者取消輸入，還可以用表單按鈕來控制其他定義了處理腳本的處理工作。

表單組件介紹

表單組件就是用來讓用戶輸入信息、接收用戶輸入信息的組件，我們經常會在網頁上看到的文本框、按鈕、單選框、復選框等等，這些就是所謂的組件。當我們注冊某個網站的用戶時，就能看到一堆的組件，讓我在這些組件里輸入、選擇相關的信息，然后點擊提交按鈕后，這些信息就會提交到服務器上，這就是組件的一個主要作用，收集組件里的數據并提交到服務器上這是表單的作用，所以組件是在表單里面的。

表單的標簽是<form>，有一點要注意的是：在表單里不要再嵌套表單，這么做沒有任何意義。

<form>標簽屬性介紹：

在表單標簽里有一個action屬性，這個屬性用于指定收集的數據提交到哪個服務器的接收頁面上，示例：

method屬性，這個屬性用于指定數據提交時會不會在URL上顯示，這個屬性有兩個關鍵字，一個是get一個是post，get表示在URL上顯示提交，post則是隱藏提交，示例：

target屬性，這個屬性用于指定數據提交完成后用哪個窗口顯示，它的用法和超鏈接<a>標簽里的target用法是一樣的，示例：

enctype屬性，enctype指定了HTTP請求的Content-Type。簡單來說就是指定數據提交的類型，通常來說有兩種類型：一種是帶有文件的數據提交，一種是不帶有文件的數據提交。在默認情況下，HTML的form表單中的enctype屬性默認指定的是：application/x-www-form-urlencoded類型，也就是不帶有文件的數據提交類型。enctype屬性里另一個關鍵字為：multipart/form-data，這就是指定帶有文件提交的類型，所以一般使用到enctype屬性也就只會用到multipart/form-data關鍵字，因為默認就是application/x-www-form-urlencoded關鍵字，何必多此一舉，示例：

accept-charset屬性，此屬性用于指定表單的字符集編碼，示例：

novalidate屬性，這個屬性表示表單中所有的組件信息都不需要驗證，例如我有一個email組件，這個組件在數據提交時會經過一個判斷驗證一下email信息是否正確，但是加上了novalidate屬性就不會有這一步的驗證。這個屬性就只有一個關鍵字：novalidate，所以不寫關鍵字也可以。示例：

表單組件之<input />引入組件

<input />標簽引入的組件用于收集用戶輸入的內容，例如文本框、單選框復選框、密碼框等等，這個標簽最主要的屬性是type，這個屬性用于選擇你需要使用什么樣的組件，type的關鍵字很多，因為組件很多，每一個關鍵字表示著一個組件。

type屬性常用組件介紹：

1. date日期選擇，示例：

運行結果：

1. datetime，也是時間選擇，但是大部分瀏覽器不支持

2. file文件選擇，示例：

運行結果：

在file組件里有一個multiple屬性，加上這個屬性就可以選擇多個文件，不加的話只能選擇一個文件，示例：

運行結果：

1. color顏色選擇，示例：

運行結果：

1. week選擇一個日期顯示第幾周，示例：

運行結果：

1. time選擇一個時間，示例：

運行結果：

1. range拉動條，示例：

運行結果：

1. checkbox復選框，示例：

運行結果：

1. radio單選框，示例：

運行結果：

按鈕組件：

1. submit表單提交按鈕，示例：

運行結果：

1. reset 重置表單數據按鈕，示例：

運行結果：

1. button 普通按鈕，示例：

運行結果：

文本組件：

1. search搜索框，示例：

運行結果：

1. text文本框，示例：

運行結果：

1. email自動驗證email文本框，示例：

運行結果：

1. number 數字框，示例：

運行結果：

1. password 密碼框，示例：

運行結果：

1. tel電話號碼框，示例：

運行結果：

1. hidden 隱藏域，隱藏域在網頁上是看不到的，只有在代碼里看得到，示例：

運行結果：

以上就是type屬性里常用的組件

name屬性，當數據提交到服務器時會讀取這個屬性里的數據。這個屬性還有一個作用，在使用單選框要實現單選時也需要使用這個屬性，如果沒有加上這個屬性的話，就無法實現單選，示例：

運行結果：

value屬性，這個屬性可以給組件加上一個值，這個值會提交給服務器的，value屬性還可以作為默認值使用，示例：

運行結果：

require屬性，表示必填項，這個屬性的關鍵字也只有一個，所以不寫值也可以，如果這個加上這個屬性的組件沒有填寫信息的話，表單就不會進行提交，示例：

運行結果：

placeholder屬性，加上此屬性可以提示組件需要填寫些什么信息，示例：

運行結果：

autofocus屬性，讓組件獲得焦點，示例：

運行結果：

pattern屬性，這個屬性的值可以填寫正則表達式，聲明了此屬性的組件，數據內容必須符合正則表達式里的規定，例如我寫了一個正則表達式規以數字開頭以字母結尾，但是我填寫的時候卻是以字母開頭數字結尾，看看提交時會發生什么，示例：

運行結果：

不常用屬性：

checked，這個屬性在單選框或者復選框上使用，哪個單選框或者復選框上聲明了這個屬性，那么就會默認選擇聲明了此屬性的組件，示例：

運行結果：

disabled，此屬性用于禁用某個組件，組件聲明了這個屬性后就不能使用了，并且禁用組件里的數據也不會提交給服務器，示例;

運行結果：

readonly，聲明此屬性表示此組件只能夠讀取，不能夠進行修改或者輸入：

運行結果：

list，要實現下拉框之類功能的組件可能會使用到這個屬性，這屬性是用來提供多項數據給用戶選擇的，示例：

運行結果：

要注意的一點是，在html5之前這種寫法不支持，只能用select標簽完成。

max，指定組件的最大值，示例：

運行結果：

min，指定組件的最小值

運行結果：

step，指定只能輸入某一個整數的倍數，示例：

運行結果：

date組件使用value屬性設置默認值格式示例：

運行結果：

重置按鈕示例：

運行結果：