整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
一篇：Java 0基礎入門 （Html標簽的使用）
表單在網頁中主要負責數據采集功能。
一.表單實際應用場景
百度搜索
5173注冊
如上兩張圖，圖中的黑色線條是我畫上去的，如果按照黑線，在Excle中畫出這兩張表單，相信大家都可以也不是很難，那在Html中，我們同樣也是畫出這樣的表單，最后將黑線隱藏即可。
二.表單包含的控件
具體寫法：（插一句，Html代碼中<!--xxxx-->,這樣的內容，是注釋內容，也就是代碼執行的時候并不執行，只是類似看文言文時，旁邊的注解一樣）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
action:指定服務器端處理程序的路徑（Java、.Net、PHP、Python、NodeJs……）
method:提交方式,有get和post兩種
get：會將表單中的值直接帶在地址欄中 不安全 數據量有限制
post：不會將表單中的值帶在地址欄中 更安全 數據量沒有限制
-->
<form action="http://www.baidu.com" method="get">
<!--
對于不同控件中的value屬性值，一般就是服務器端要拿到的具體的值
-->
<!--
單行文本框：
type屬性：因為密碼框、單選按鈕、復選框也都是input
通過type屬性來區分當前的input到底是什么
(如果input不指定type屬性值，默認取值為text)
value：指定單行文本框的初始值
-->
<p>
單行文本框：<input type="text" value="初始值"/>
</p>
<p>
<!--
placeholder:當沒有內容時默認顯示的內容，隨著用戶的輸入，會消失
如果清空輸入嗎，會再次出現
plcaceholder和value的區別在于：
placeholder不能通過用戶輸入直接改變內容
value提供的值用戶是可以改變的
maxlength：限制輸入字符的最大長度
*name:相當于給控件起個名字，服務器端可以根據這個名字，來區分每一項數據代表什么含義
-->
單行文本框：<input type="text" placeholder="初始值" maxlength="5" name="txt"/>
</p>
<!--
密碼框
type:password密碼框
單行文本框中能用的屬性，密碼框也都能用
-->
<p>
密碼框：<input type="password" placeholder="請輸入密碼" name="pwd" maxlength="6"/>
</p>
<!--
單選按鈕
type:radio 單選按鈕
checked="checked"默認選中當前項
name在radio中的作用：
(1)服務器端用來識別數據
(2)用來描述同一組信息的內容只選中其中一個，用來分組，產生互斥
-->
<p>
<!--
<label>:如果要點擊單選按鈕后面的字也能夠選中單選按鈕，就使用
該標簽將單選按鈕以及文字都包裹在一起
-->
<label>
<input type="radio" checked="checked" name="sex" value="0"/>男
</label>
<label>
<input type="radio" name="sex" value="1"/>女
</label>
</p>
<!--
復選框
type：checkbox
name：用來對同一組相同含義的checkbox分組，就算給了name，也能夠一次性選中多個
-->
<p>
<input type="checkbox" name="hobby" value="0"/>跑步
<input type="checkbox" name="hobby" value="1"/>打球
</p>
<!--
按鈕 input
-->
<p>
<!--
重置按鈕 type="reset"
value:按鈕中要顯示的文本，一般不需要傳遞給服務器端
重置不是簡單的清空，而是回到頁面最原始的狀態
-->
<input type="reset" value="重置"/>
<!--
提交按鈕 type="submit"
value:按鈕中要顯示的文本，一般不需要傳遞給服務器端
-->
<input type="submit" value="提交" />
<!--
普通按鈕：type="button"
普通按鈕本身不具有任何的特殊行為，其行為一般需要通過js腳本來綁定
-->
<input type="button" value="普通按鈕" onclick="alert('這是一個普通按鈕');"/>
<!--
圖片按鈕：type="image"
通過圖片來制作按鈕，相當于提交按鈕
-->
<input type="image" src="001.jpg" />
<!--
注意：對于提交按鈕和重置按鈕，如果放在form元素以外的地方，
是無法對表單進行重置或提交操作的
-->
</p>
<!--
多行文本框 textarea (文本域)
cols：列數
rows：行數
name:用于在服務端獲取數據時使用
注意：文本域中的默認內容應該寫在標簽之間，而不是value屬性中
這一點和當行文本框是有區別的
placeholder:文本域為空時的默認內容
-->
<p>
<textarea cols="10" rows="20" placeholder="默認值">dsadasdas</textarea>
</p>
<!--
文件域 input type="file"
-->
<p>
<input type="file" />
</p>
<!--
隱藏域 input type="hidden"
不希望用戶看到，但是程序處理時需要的數據，可以放在隱藏域中
-->
<p>
隱藏域：<input type="hidden" />
</p>
<!--
下拉列表框<select>
下拉列表中的每一個子選項
-->
<p>
<select>
<option>====請選擇====</option>
<option>江蘇</option>
<option>浙江</option>
<option>上海</option>
</select>
</p>
<!--
select標簽的multiple="multiple"屬性
將原本通過箭頭點擊的方式顯示改為一次性就顯示若干個
并且可以一次性選中多項
-->
<p>
<select multiple="multiple">
<option>====請選擇====</option>
<option>江蘇</option>
<option>浙江</option>
<option>上海</option>
<option>山東</option>
<option>安徽</option>
<option>福建</option>
</select>
</p>
<!--
按鈕 button HTML5新特性
1、和input按鈕的第一個區別：
input要顯示的文本在value屬性中
button要顯示的文本在標簽之間
button如果沒有指定類型，默認就是一個提交按鈕
2、和input按鈕的第二個區別：
input按鈕中的文本只能是普通文本
button標簽之間寫的任何html內容都能作為按鈕的外觀
-->
<p>
<button type="submit">提交按鈕</button>
<button type="reset">重置按鈕</button>
<button type="button" onclick="alert('普通button按鈕');">普通按鈕</button>
<button>
<h1>標題按鈕</h1>
</button>
</p>
<!--
表單元素中的兩個常用屬性
(1)前端：都只能看不能改
(2)后端：readonly的控件值可以獲取到，但是disabled不行
-->
<input disabled="disabled" value="默認值"/>
<input readonly="readonly" value="默認值"/>
</form>
</body>
</html>
三.表單的基本結構
<form action="http://www.sohu.com" method="post">
……
</form>
action：指定提交后，由服務器上哪個處理程序處理，是一個路徑，絕對路徑，相對路徑都可以。
method：指定向服務器提交的方法，一般為post或get方法, post方法比較安全，且能傳輸的數據量更大
四.表單的基本語法
<form action="login.aspx" method="post">
<p>用戶名：
<input name="username" type="text"/>
</p>
<p>密 碼：
<input name="pwd" type="password" />
</p>
<p>
<input type="submit" name="btn" value="提交" />
</p>
</form>
表單輸入元素：input，當然也有其它的。
五.表單的執行原理（了解即可）
客戶端（比如：我們打開的網頁）請求登陸，填寫表單信息，點擊某按鈕提交→數據傳輸到服務器，服務器會執行后端代碼（后續會講到），驗證發來的信息，給出反饋（比如：通過；不通過）→客戶端接收服務器的反饋，在頁面上顯示出來。
舉個例子：
一個客戶去某店買東西，客戶（客戶端）說我是你們會員，提供了姓名，手機號（這就類似填寫表單的一個過程），然后店員（服務器）根據你提供的姓名和手機號，查到了你的會員信息，然后告訴你（反饋）已經查到，確實是本店會員。
通過舉例，希望大家能通俗的了解表單的執行原理。
六.表單的元素
1.文本框
<input name="userName" type="text" value="123456" maxlength="5">
type：指定input的類型，如果為text表示普通文本框
value：文本框中的初始值
maxlength：最大能夠輸入的字數
name：name屬性對于表單元素的作用，在于讓服務器能夠得到表單元素中輸入的值，例如request.getParameter(“userName”)，之后的文章中會講。
還有一個有用的placeholder屬性，同樣為初始值，區別于value，以灰色顯示，且在輸入內容時會自動被所輸入的內容覆蓋，清空輸入內容后，又會顯示出來，類似于一個提醒的作用。可自行嘗試下。
2.密碼框
<input name="userPwd" type="password" value="" maxlength="4">
type：指定input的類型，如果為password表示密碼框
value：密碼框中的初始值
maxlength：最大能夠輸入的字數
name：name屬性對于表單元素的作用，在于讓服務器能夠得到表單元素中輸入的值，例如request.getParameter(“userPwd”)，之后的文章中會講。
3.按鈕
<input type="reset" value="重填"/>
<input type="submit" value="提交" />
<input type="button" value="普通按鈕" />
<input type="image" src="images/login.gif" value="圖片按鈕" />
type的取值不同代表不同類型的按鈕，對于提交按鈕會提交表單，重置按鈕可以清空表單內容，但是其它類型的按鈕，具體實現什么功能，只能通過后面學習腳本以后才能進行處理，value屬性表示按鈕上顯示的文本，name屬性的主要作用體現在后期腳本的綁定上
4.button按鈕
在 button 元素內部，您可以放置內容，比如文本或圖像。這是該元素與使用 input 元素創建的按鈕之間的不同之處。
<button> 控件 與 <input type="button"> 相比，提供了更為強大的功能和更豐富的內容。<button> 與 </button> 標簽之間的所有內容都是按鈕的內容，其中包括任何可接受的正文內容，比如文本或多媒體內容。例如，我們可以在按鈕中包括一個圖像和相關的文本，用它們在按鈕中創建一個吸引人的標記圖像。
寫法：<button type="button">開</button>
5.單選按鈕
<input name="gen" type="radio" value="男" checked="checked">
<input name="gen" type="radio" value="女" >
input的type取值為radio時，表示單選按鈕
name屬性除了能夠讓服務器獲取選中的單選按鈕信息外，還能將單選按鈕進行分組
checked=”checked”表示選中狀態，同一組單選按鈕，其中選中狀態的按鈕最多只有一個
value表示最后服務端真正能獲取到的值。并不是顯示在單選按鈕外邊的內容。
還可以在外邊嵌套<label></label>標簽提升用戶體驗
6.復選框
<input type="checkbox" name="hobby1" value="sports" />
<input type="checkbox" name="hobby2" value="talk" checked="checked" />
<input type="checkbox" name="hobby3" value="play" />
input的type取值為checkbox時，表示復選框
name屬性除了能夠讓服務器獲取選中的復選框信息外，還能將復選框進行分組
checked=”checked”表示選中狀態，同一組復選框，其中，選中狀態的可以任意多個
value表示最后服務端真正能獲取到的值。并不是顯示在復選框外邊的內容。
還可以在外邊嵌套<label></label>標簽提升用戶體驗
7.文本域
用來輸入多行文本
寫法：<textarea name="" cols="10" rows="20">12345</textarea>
name:用于在服務端獲取數據時使用
cols：列數
rows：行數
值得注意的是：textarea中的內容應該寫在標簽之間，而不是value屬性中！！！如上述寫法中，“12345”即為多行文本框的內容。
8.文件域
<input type="file" name="uploadFile">
<input type="submit" name="upload" value="上傳" />
當input的type為file時，表示文件上傳按鈕，一般會和提交按鈕一起使用，此處不做太多說明，文件具體上傳時需要學習服務端編程后方可掌握。
9.列表框
<select name="bmon">
<option value="" selected="selected">
[選擇月份]
</option>
<option value="0">一月</option>
<option value="1">二月</option>
<option value="2">三月</option>
<option value="3">四月</option>
</select>
select：name屬性，列表名稱，用于服務器獲取選中項
option是列表下面的每一個小項，value屬性是服務器能獲取到的具體的值，<option>標簽之間是呈現給用戶的選項信息，selected="selected"表示該項選中。
10.隱藏域
方便“記住”一些供服務端使用的信息、但又不希望客戶看到的數據
<input type="hidden" name="…." value="…" />
主要就是type屬性為hidden，其他屬性與input框的屬性填寫相同。
七.表單中的一些屬性
只讀和禁用屬性
readonly：希望某個框內的內容只允許用戶看，不能修改
disabled：因沒達到使用的條件，限制用戶使用
<textarea readonly="readonly"></textarea>
<input type="text" readonly="readonly" />
<input type="text" disabled="disabled" />
上面的屬性也可用于其它表單元素，達到只讀或禁用的效果。
form 表單中disabled屬性的元素不參與表單提交，也就是表單submit后，后臺無法獲取有disabled屬性元素的值。
八.HTML5 新的 input 類型及支持的瀏覽器
HTML5 新的 input 類型及支持的瀏覽器
九.音頻標簽
寫法：
<audio src="Nightwish-She Is My Sin.mp3" controls="controls" autoplay="autoplay" loop="loop">
暫不支持此標簽
</audio>
src：要播放的音頻的 URL。
autoplay：如果出現該屬性，則音頻在就緒后馬上播放。
loop：如果出現該屬性，則每當音頻結束時重新開始播放。
controls：若出現該屬性，則向用戶顯示控件，比如播放按鈕。
暫不支持此標簽，是在你使用的瀏覽器，不支持的情況下顯示。
具體瀏覽器的兼容性，見下圖
audio標簽各瀏覽器兼容情況
十.視頻標簽
寫法：
<video src="http://www.w3school.com.cn/i/movie.ogg" controls="controls" autoplay="autoplay" loop="loop" width="1000px">
您的瀏覽器不支持video標簽
</video>
src：要播放的視頻的 URL。
controls="controls" 若出現該屬性，則向用戶顯示控件，比如播放按鈕。
loop="loop" 循環播放
autoplay="autoplay" 自動播放
width、height:指定視頻窗口的大小
相比音頻標簽，可以添加width和height指定視頻窗口大小
lt;select>下拉框
<option>是下拉框的選項
<submit>提交按鈕
<value>名稱提交方式
<checked>單選按鈕進入頁面必選這個
<checkbox>多選按鈕
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
請選擇你喜歡的水果<br />
<form>
<input type="radio" value="apple" name="fruit" checked="checked"/>蘋果<br />
<input type="radio" value="orange" name="fruit"/>橘子<br />
<input type="radio" value="mango" name="fruit"/>芒果<br />
<input type="submit" value="提交"/>
</form>
請選擇你喜歡的水果<br />
<form>
<input type="checkbox" value="apple" name="fruit"/>蘋果<br />
<input type="checkbox" value="orange" name="fruit"/>橘子<br />
<input type="checkbox" value="banana" name="fruit"/>香蕉<br />
<input type="submit" value="提交"/>
</form>
請選擇你喜歡的水果<br />
<form>
<select name="fruit" size="2">
<option value="apple">蘋果</option>
<option value="orange">橘子</option>
<option value="mango" selected="selected">芒果</option>
</select><br />
<input type="submit" value="提交"/>
</form>
</body>
</html>
享：
你可能已經聽說過，HTML5里引入了幾種新的input類型。在HTML5之前，大家熟知的input類型包括：text(輸入框)，hidden(隱藏域)，submit(提交按鈕)等。而HTML5到來之后，新增的input類型包括：number(數字)，date(日期)，color(顏色)，range(范圍)等等。網上之所以還沒有大量的出現對這些新型的input類型的使用，是因為還有很多人在使用古老的IE6/IE8，只有當使用這些古老瀏覽器的人所占的比例可以忽略不計時，那就是HTML5主導天下之日，那天也是我們Web開發人員的新紀元的開始。
下面是這幾種新型input類型的實例演示，可能在不同的瀏覽器上它們的樣式會稍微有些變化，但基本的功能都是一樣的。
<input type="number">效果：
<input type="date">效果：
<input type="color">效果：
<input type="range">效果：
需要注意的是，如果你使用的是谷歌瀏覽器或Opera瀏覽器，當你點擊日期類型的輸入框時，會彈出日歷，讓你選擇日期，但如果你使用的是火狐瀏覽器，很遺憾，火狐瀏覽器還沒有實現彈出日歷的功能，因為HTML5規范里沒有規定實現日歷的方法，所以各瀏覽器自己決定如何實現，相信不久之后火狐瀏覽器/IE瀏覽器也會有自己的彈出式日歷框。
谷歌瀏覽器中date類型效果圖：
轉載:https://www.webhek.com/post/html5-input-type.html
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
