整合營銷服務商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
表單元素指的是不同類型的 input 元素、復選框、單選按鈕、提交按鈕等等。
<input> 元素元素有很多形態(tài)，根據(jù)不同的 type 屬性。
<input type="text" name="name" id="name" class="txt"/>
文本域(Text fields) <input>元素
<p>請輸入您的姓名：<br /><input type="text" name="name" id="name" class="txt"/></p>
Text fields
<select>元素、<option>元素
簡單的帶有預選值的下拉列表，即預選值指預先指定的首選項。
<p>請選擇你喜歡的顏色：<br /> <select name="color" id="color"> <option value="red">紅</option> <option value="green">綠</option> <option value="blue">藍</option> <option value="yellow">黃</option> <option value="cyan">青</option> <option value="purple">紫</option> </select></p>
表單單選按鈕元素： radio元素
<p>請問你的性別是：<br /> <input type="radio" name="sex" id="male" value="male" class="rad" />男<br /> <input type="radio" name="sex" id="female" value="female" class="rad" />女</p>
表單復選框元素 ：checkbox元素
<p>請問你喜歡做些什么：<br /> <input type="checkbox" name="hobby" id="book" value="book" class="check" />看書 <input type="checkbox" name="hobby" id="net" value="net" class="check" />上網(wǎng) <input type="checkbox" name="hobby" id="sleep" value="sleep" class="check" />睡覺</p>
文本域(Textarea)（多行文本輸入控制，在文本域中，可寫入的字符字數(shù)不受限制）
<p>我要留言：<br /> <textarea name="comments" id="comments" cols="30" rows="4" class="textarea"></textarea></p>
表單提交按鈕元素 ：submit元素 class類選擇器
<p><input type="submit" name="btnSubmit" value="Submit" class="btn" /></p>
1，action：表示當前表單中的內(nèi)容提交給哪個頁面進行處理
2，method:表示當前表單提交的方式，常見的有g(shù)et和post方式，默認是get提交
<form method="post"> .......... </form>
<form method="get"> 使用展現(xiàn)形式：
<form method="post" > 使用展現(xiàn)形式：
幾乎所有的瀏覽器都支持<form>表單標簽。
基礎(chǔ)信息表單
HTML代碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="information.css"/> <title>基礎(chǔ)信息表單</title> </head> <body> <form method="post"> <p>請輸入您的姓名：<br /><input type="text" name="name" id="name" class="txt"/></p> <p>請選擇你喜歡的顏色：<br /> <select name="color" id="color"> <option value="red">紅</option> <option value="green">綠</option> <option value="blue">藍</option> <option value="yellow">黃</option> <option value="cyan">青</option> <option value="purple">紫</option> </select></p> <p>請問你的性別是：<br /> <input type="radio" name="sex" id="male" value="male" class="rad" />男<br /> <input type="radio" name="sex" id="female" value="female" class="rad" />女</p> <p>請問你喜歡做些什么：<br /> <input type="checkbox" name="hobby" id="book" value="book" class="check" />看書 <input type="checkbox" name="hobby" id="net" value="net" class="check" />上網(wǎng) <input type="checkbox" name="hobby" id="sleep" value="sleep" class="check" />睡覺</p> <p>我要留言：<br /> <textarea name="comments" id="comments" cols="30" rows="4" class="textarea"></textarea></p> <p><input type="submit" name="btnSubmit" value="Submit" class="btn" /></p> </form> </body> </html>
對表單形式進行修改的CSS樣式如下：
@charset "utf-8";
/* CSS Document */
form
{
width:250px;
height:350px;
border:1px dotted #aAAAAA;
padding:1px 6px 1px 6px;
margin:0px;
font:14px Arial, Helvetica, sans-serif;
}
input
{
color:#00008b;
}
input.txt
{
border:1px inset #00008b;
background-color:#ADd8e6;
}
input.btn
{
color:#00008b;
background-color:#add8e6;
border:1px outset #00008b;
padding:1px 2px 1px 2px;
}
select
{
width:80px;
color:#00008b;
background-color:#add8e6;
border:1px solid #00008b;
}
textarea
{
width:200px;
height:40px;
color:#00008b;
background-color:#add8e6;
border:1px inset #00008b;
}
以上知識是我在學習過程中了解到的關(guān)于表單的相關(guān)知識，我們可以相互交流，學習。
（文中部分圖片來自網(wǎng)絡(luò)，若有侵權(quán)，請聯(lián)系修正）
多公司的業(yè)務需要收集和展示信息，但常常困惑于表單數(shù)量龐大，復用率不高等問題。動態(tài)HTML可填充表單是解決這一困境的理想方法。隨著HTML和自適應HTML表單的發(fā)展，您可以超越靜態(tài)PDF表單的范圍，而且您可以在保證安全性的情況下做到這一點。許多企業(yè)級的工作流軟件可能要上萬元，而基于web架構(gòu)，利用可填充的HTML表單作為工作流文件傳遞的系統(tǒng)，可以在任何設(shè)備上輕松訪問，并通過已完成表單的所有渠道交付選項進行提交。業(yè)務流程的完整工作流可以通過與現(xiàn)有或新業(yè)務系統(tǒng)集成的單個表單解決方案來處理。它的好處是您不再需要大量修改業(yè)務軟件，只要利用動態(tài)HTML表單作為出入系統(tǒng)的通道，讓它成為連接您與客戶、合作伙伴、供應商和員工的自動化信息通訊解決方案。
動態(tài)HTML表單在醫(yī)療上的可應用性
真正的動態(tài)HTML表單只顯示與完成多步驟工作流的個人相關(guān)的問題和信息。效率和準確性是動態(tài)HTML表單的首要任務。在設(shè)計表單時，用戶界面在重要功能列表中的位置也很高。用戶不想浪費時間查看與其情況無關(guān)的字段、段落或按鈕。我最近做了核磁共振檢查，并收到了一份兩頁紙的合法大小的文件。考慮到核磁共振機是醫(yī)院里最昂貴、技術(shù)最先進的機器之一，而且它們使用的是紙質(zhì)表格耗損量也巨大。當我看到那些與我檢查不相關(guān)的問題時，我忽然意識到這個診斷報告中的流程存在著多大的效率浪費。更不用說，在診療報告中有些部分實際上是空白的，也只能由核磁共振技術(shù)人員填充。于是，我聯(lián)系了醫(yī)院管理人員，向他們展示了表單的設(shè)計和收集數(shù)據(jù)的方式。許多情況下，當人們已經(jīng)是您的客戶或病人時，重復的提供地址和電話號碼等基本信息，都是非常不必要的事。
根據(jù)用戶所做的選擇，動態(tài)HTML表單將只顯示與每個選擇相關(guān)的信息，從而最大限度地提高表單的實用性。無論是醫(yī)務人員還是醫(yī)院行政人員，時間對于他們來說太寶貴了，不能浪費在那些無關(guān)緊要的事情上。如果患者沒有過敏癥，他們選擇“否”，表單列表上無需顯示常見的過敏癥列表。更明智地是使用動態(tài)HTML表單，如果患者對過敏原選擇“是”，則表單可以自動調(diào)整以顯示可能的新選項，從而觸發(fā)顯示表單字段，以便患者列出其過敏原。此外，表單還可以顯示常見過敏原的復選框列表。
使用動態(tài)HTML表單收集數(shù)據(jù)的好處對于工作流和客戶體驗目標來說是巨大的。HTML自適應表單的一個最大優(yōu)點是，它們?yōu)槭澜缟纤腥颂峁┝税踩亍⒖煽康氐目商畛浔韱危⑶也恍枰蕾嚾魏翁厥獾能浖陀布＠纾瓿蒑RI表格的患者可以在就醫(yī)前、在家里、在路上就完成，并且可以通過電子郵件將PDF發(fā)送給他們，以獲取病患的記錄。想象一下，在客戶和業(yè)務方面，您的用戶使用可填充表單可以減少多少步驟和時間。HTML表單是動態(tài)的、可移植的，在智能手機、平板電腦、PC上提供全渠道的交付，并且可以通過Web服務與任何業(yè)務軟件一起工作。
動態(tài)可填充表單會根據(jù)輸入的數(shù)據(jù)立即做出更改。例如，如果用戶正在填寫有關(guān)新實用程序服務的表單，則這些字段僅與該特定服務相關(guān)，并且可以根據(jù)需要提供可用的服務選項。另一個例子是保險單。根據(jù)所有必要的保險表單，您可以憑借用戶的需要縮小或擴展表單的內(nèi)容，不必填寫不必要的字段，也不必占用客戶大量的時間。
基于web的動態(tài)HTML表單最終能滿足全渠道交付，這對客戶來說是大有裨益的。
可填充表單可以是跨行業(yè)的解決方案。如前所述，醫(yī)療保健中存在一些場景，同樣地在銀行、教育、保險、制造、電信、公用事業(yè)也應使用動態(tài)可填充表單。這些行業(yè)的企業(yè)以及更多內(nèi)部或從供應商、業(yè)務合作伙伴和客戶外部收集數(shù)據(jù)，并向他們提供信息，盡可能的減少工作流中表單填寫的時間，提升工作流效率。
、表單在網(wǎng)頁中的應用：登錄、注冊常用到表單
2、表單的語法：
<form method="post" action="result.html">
<p> 名字：<input name="name" type="text" > </p>
<p> 密碼：<input name="pass" type="password" > </p>
<p>
<input type="submit" name="Button" value="提交"/>
<input type="reset" name="Reset" value="重填“/>
</p>
</form>
3、表單元素說明：
type:指定元素的類型。text、password、checkbox、radio、submit、reset、file、hidden、image 和 button，默認為 text.
name:指定表單元素的名稱.
value:元素的初始值。type 為 radio時必須指定一個值.
size:指定表單元素的初始寬度。當 type 為 text 或 password時，表單元素的大小以字符為單位。對于其他類型，寬度以像素為單位.
maxlength:type為text 或 password 時，輸入的最大字符數(shù).
checked:type為radio或checkbox時，指定按鈕是否是被選中.
4、示例：
<html >
<head>
<title>表單元素</title>
</head>
<body>
<!-- 表單 -->
<form method="POST" action="#">
<!-- 標簽 -->
<label for="username">姓名：</label>
<!-- 文本框 value屬性是設(shè)置默認顯示的值-->
<input id="username" value="songzetong" />
<!-- 密碼框 -->
<br/><label for="pwd">密碼：</label>
<input type="password" id="pwd">
<br/>
<!-- 單選框 -->
<label for="sex">性別：</label>
<input type="radio" name="sex" checked/>男
<input type="radio" name="sex"/>女
<!-- 復選框 -->
<br/>
<label for="hobby">愛好：</label>
<input type="checkbox" name="hobby" id="hobby"/>聽音樂
<input type="checkbox" name="hobby"/>旅游
<input type="checkbox" name="hobby"/>游泳
<br/>
<!-- 下拉列表 -->
<label for="month">月份：</label>
<select id="month"/>
<option>1月</option>
<option>2月</option>
<option>3月</option>
</select>
<br/>
<!-- 按鈕 -->
<input type="reset" value="重置按鈕"/>
<input type="submit" value="提交按鈕"/>
<input type="button" value="普通按鈕"/>
<br/>
<!-- 圖片按鈕 -->
<input type="image" src="one.jpg" width="200px" heigth="200px"/>
<br/>
<button type="submit">提交</button>
<button type="reset">重置</button>
<br/>
<label for="profile">
個人簡介：
</label>
<!-- 多行文本域 -->
<textarea >本人已同意什么條款</textarea>
<br/>
<br/>
<br/>
<!-- 文件域 -->
<label for="upload">上傳頭像:</label>
<input type="file"/>
<!-- 郵箱 -->
<br/>
<label for="QQ郵箱">郵箱：</label>
<input type="email"/>
<br/>
<!-- 網(wǎng)址 -->
<label for="ur">網(wǎng)址：</label>
<input type="url"/>
<!-- 數(shù)字 -->
<br/>
<label for="shuzi">數(shù)字：</label>
<input type="number" name="shuzi" min="0" max="100" step="10"/>
<br/>
<label for="huakuai">滑塊：</label>
<input type="range" />
<!-- 搜索框 -->
<br/>
<label for="sousuo">搜索</label>
<input type="search"/>
<!-- 隱藏域 -->
<br/>
<input type="hidden"value="1">
<!-- 只讀：只能看不能修改，禁用：不能用 -->
<input value="我是只讀的" readonly/>
<input type="button" value="我是禁用的" disabled/>
<!-- palceholder默認提示 -->
<br/>
<input placeholder="默認提示框"/>
<br/>
<!-- 文本框內(nèi)容提示不能為空，否則不允許用戶提交表單（網(wǎng)頁上的必填項） -->
<input required="必填項"/>
<button type="submit">提交</button>
<br/>
<!-- 用戶輸入的內(nèi)容必須符合正則表達式所指的規(guī)則，否則就不能提交表單-->
<input required pattern="^1[3578]\d{9}"/>
<button type="submit">提交</button>
</form>
</body>
</html>
效果圖鏈接：file:///D:/ruanjian/VS/wenjianxiangmu/htmlThree/form.html
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
