html5之form表单
表單在 Web 網頁中用來給訪問者填寫信息，從而能采集客戶端信息，使網頁具有交互的功能。一般是將表單設計在一個Html 文檔中，當用戶填寫完信息后做提交(submit)操作，于是表單的內容就從客戶端的瀏覽器傳送到服務器上，經過服務器上程序處理后，再將用戶所需信息傳送回客戶端的瀏覽器上，這樣網頁就具有了交互性。這里我們只講怎樣使用Html 標志來設計表單。
所有的用戶輸入內容的地方都用表單來寫，如登錄注冊、搜索框。
一個表單一般應該包含用戶填寫信息的輸入框,提交按鈕等，這些輸入框,按鈕叫做控件,表單很像容器,它能夠容納各種各樣的控件。
【1】action屬性
地址欄信息：
http://127.0.0.1:8020/form%E8%A1%A8%E5%8D%95%E7%BB%83%E4%B9%A0/aaa?username=kb&pwd=123456
?：之前是提交的資源的目標地址（http://127.0.0.1:8020/form%E8%A1%A8%E5%8D%95%E7%BB%83%E4%B9%A0/aaa）
?：之后是提交的具體的數據（username=kb&pwd=123456）
http： 信息交互遵照協議 http協議
127.0.0.1：代表本機的IP地址
8020：Hbuilder內置服務器的端口號
Form%E8%A1%A8%E5%8D%95：指的是你的項目名字：Form表單
PS：瀏覽器的地址欄是不支持中文的，都會轉成編碼傳送，如果你在地址欄看到中文，只是當前的那個瀏覽器給你一個友好的顯示
PS:可以使用在線解析工具查看：urlencode
aaa:目標資源 --》去當前項目下找aaa了
?后的內容：
username=kb&pwd=123456
我們寫的文本框，密碼框等必須要加入一個屬性：name;
然后name屬性和具體錄入的信息會拼成一個鍵值對的形式
多個鍵值對之間 ，用&符號進行拼接
PS：只有放在form表單中的內容才會被收集并提交
【2】method屬性：
默認情況下不寫method屬性的時候就相當于method=“get”
get方式：提交數據可見，不安全，提交數據長度有限制，效率高
post方式 ：提交數據不可見，安全，提交數據長度沒有限制，效率低
【3】表單元素
一、input
input標簽使用很廣泛，通過type屬性的不同值，來表現不同的形態。
1、type=“text” 文本框，里面文字可見
表單元素必須有一個屬性：name 有了name才可以提交數據,才可以采集數據
然后提交的時候會以鍵值對的形式拼到一起。
value:就是文本框中的具體內容
鍵值對：name=value的形式
2、如果value提前寫好，那么默認效果就是value中內容。
3、一般默認提示語：用placeholder屬性，不會用value–》value只是文本框中的值。
效果展示：
4、readonly只讀：只是不能修改，但是其他操作都可以，可以正常提交
寫法：
readonly=“readonly”
readonly
readonly = “true”
效果展示：
5、disabled禁用：完全不用，不能正常提交
用戶名:<input type="text" name="username2" value="" disabled="disabled"/>效果展示：
6、密碼框
密碼框:效果錄入信息不可見
7、單選按鈕
注意：一組單選按鈕，必須通過name屬性來控制，讓它們在一個分組中，然后在一個分組里只能選擇一個
正常狀態下，提交數據為：gender=on ，后臺不能區分你提交的數據
不同的選項的value值要控制為不同，這樣后臺接收就可以區分了
8、多選按鈕
必須通過name屬性來控制，讓它們在一個分組中，然后在一個分組里可以選擇多個
不同的選項的value值要控制為不同，這樣后臺接收就可以區分了
多個選項提交的時候，鍵值對用&符號進行拼接
默認選中：checked="checked"
9、文件
效果展示：
10、隱藏域
<input type="hidden" name="username" value="123456"/>11、普通按鈕
<input type="button" value="普通按鈕"/>12、重置按鈕
<input type="reset" value="重置" />
13、下拉列表
默認選中：selected=“selected”
多選：multiple="multiple"
效果展示
14、多行文本框
效果展示
15、label標簽
一般會在想要獲得焦點的標簽上加入一個id屬性，然后label中的for屬性跟id配合使用。
效果展示
16、提交按鈕
具備提交功能
<input type="submit" />【4】HTML新增type類型
<input type="email" name="email" id="email" value="" />效果展示
效果展示
【5】HTML新增屬性
multiple：多選
placehoder:默認提示
autofocus:自動獲取焦點
required:必填項
效果展示
效果展示
總結
以上是生活随笔為你收集整理的html5之form表单的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： HTML5中各种标签总结（列表标签、表格
- 下一篇： HTML5之内嵌框架