HTML表單和組件
表單
基本所有的網頁無非就是在做兩件事情：1.呈現數據給客戶看，2.接收用戶輸入的數據。所以表單就是用來收集用戶輸入的數據，然後提交給服務器。
示例圖：
表單在網頁中主要負責數據采集功能，一個表單有三個基本組成部分：
1.表單標簽：這裏面包含了處理表單數據所用CGI程序的URL以及數據提交到服務器的方法。
2.表單域：包含了文本框、密碼框、隱藏域、多行文本框、復選框、單選框、下拉選擇框和文件上傳框等。
3.表單按鈕：包括提交按鈕、復位按鈕和一般按鈕；用於將數據傳送到服務器上的CGI腳本或者取消輸入，還可以用表單按鈕來控制其他定義了處理腳本的處理工作。
表單組件介紹
表單組件就是用來讓用戶輸入信息、接收用戶輸入信息的組件，我們經常會在網頁上看到的文本框、按鈕、單選框、復選框等等，這些就是所謂的組件。當我們註冊某個網站的用戶時，就能看到一堆的組件，讓我在這些組件裏輸入、選擇相關的信息，然後點擊提交按鈕後，這些信息就會提交到服務器上，這就是組件的一個主要作用，收集組件裏的數據並提交到服務器上這是表單的作用，所以組件是在表單裏面的。
表單的標簽是<form>，有一點要註意的是：在表單裏不要再嵌套表單，這麽做沒有任何意義。
<form>標簽屬性介紹：
在表單標簽裏有一個action屬性，這個屬性用於指定收集的數據提交到哪個服務器的接收頁面上，示例：
method屬性，這個屬性用於指定數據提交時會不會在URL上顯示，這個屬性有兩個關鍵字，一個是get一個是post，get表示在URL上顯示提交，post則是隱藏提交，示例：
target屬性，這個屬性用於指定數據提交完成後用哪個窗口顯示，它的用法和超鏈接標簽裏的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信息【學Java，到凱哥學堂kaige123.com】是否正確，但是加上了novalidate屬性就不會有這一步的驗證。這個屬性就只有一個關鍵字：novalidate，所以不寫關鍵字也可以。 示例：
表單組件之<input />引入組件
<input />標簽引入的組件用於收集用戶輸入的內容，例如文本框、單選框復選框、密碼框等等，這個標簽最主要的屬性是type，這個屬性用於選擇你需要使用什麽樣的組件，type的關鍵字很多，因為組件很多，每一個關鍵字表示著一個組件。
type屬性常用組件介紹：
1.date日期選擇，示例：
運行結果：
2.datetime，也是時間選擇，但是大部分瀏覽器不支持
3.file文件選擇，示例：
運行結果：
在file組件裏有一個multiple屬性，加上這個屬性就可以選擇多個文件，不加的話只能選擇一個文件，示例：
運行結果：
4.color顏色選擇，示例：
運行結果：
5.week選擇一個日期顯示第幾周，示例：
運行結果：
6.time選擇一個時間，示例：
運行結果：
7.range拉動條，示例：
運行結果：
8.checkbox復選框，示例：
運行結果：
9.radio單選框，示例：
運行結果：
按鈕組件：
1.submit表單提交按鈕，示例：
運行結果：
2.reset 重置表單數據按鈕，示例：
運行結果：
3.button 普通按鈕，示例：
運行結果：
文本組件：
1.search搜索框，示例：
運行結果：
2.text文本框，示例：
運行結果：
3.email自動驗證email文本框，示例：
運行結果：
4.number 數字框，示例：
運行結果：
5.password 密碼框，示例：
運行結果：
6.tel電話號碼框，示例：
運行結果：
7.hidden 隱藏域，隱藏域在網頁上是看不到的，只有在代碼裏看得到，示例：
運行結果：
以上就是type屬性裏常用的組件
name屬性，當數據提交到服務器時會讀取這個屬性裏的數據。這個屬性還有一個作用，在使用單選框要實現單選時也需要使用這個屬性，如果沒有加上這個屬性的話，就無法實現單選，示例：
運行結果：
value屬性，這個屬性可以給組件加上一個值，這個值會提交給服務器的，value屬性還可以作為默認值使用，示例：
運行結果：
require屬性，表示必填項，這個屬性的關鍵字也只有一個，所以不寫值也可以，如果這個加上這個屬性的組件沒有填寫信息的話，表單就不會進行提交，示例：
運行結果：
placeholder屬性，加上此屬性可以提示組件需要填寫些什麽信息，示例：
運行結果：
autofocus屬性，讓組件獲得焦點，示例：
運行結果：
pattern屬性，這個屬性的值可以填寫正則表達式，聲明了此屬性的組件，數據內容必須符合正則表達式裏的規定，例如我寫了一個正則表達式規以數字開頭以字母結尾，但是我填寫的時候卻是以字母開頭數字結尾，看看提交時會發生什麽，示例：
運行結果：
不常用屬性：
checked，這個屬性在單選框或者復選框上使用，哪個單選框或者復選框上聲明了這個屬性，那麽就會默認選擇聲明了此屬性的組件，示例：
運行結果：
disabled，此屬性用於禁用某個組件，組件聲明了這個屬性後就不能使用了，並且禁用組件裏的數據也不會提交給服務器，示例;
運行結果：
readonly，聲明此屬性表示此組件只能夠讀取，不能夠進行修改或者輸入：
運行結果：
list，要實現下拉框之類功能的組件可能會使用到這個屬性，這屬性是用來提供多項數據給用戶選擇的，示例：
運行結果：
要註意的一點是，在html5之前這種寫法不支持，只能用select標簽完成。
max，指定組件的最大值，示例：
運行結果：
min，指定組件的最小值
運行結果：
step，指定只能輸入某一個整數的倍數，示例：
運行結果：
date組件使用value屬性設置默認值格式示例：
運行結果：
重置按鈕示例：
運行結果：
HTML表單和組件