溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇“HTML中表單的知識點示例”文章，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要參考一下，對于“HTML中表單的知識點示例”，小編整理了以下知識點，請大家跟著小編的步伐一步一步的慢慢理解，接下來就讓我們進入主題吧。
1、簡易性：超級文本標記語言版本升級采用超集方式，從而更加靈活方便，適合初學前端開發(fā)者使用。 2、可擴展性：超級文本標記語言的廣泛應用帶來了加強功能，增加標識符等要求，超級文本標記語言采取子類元素的方式，為系統(tǒng)擴展帶來保證。 3、平臺無關性：超級文本標記語言能夠在廣泛的平臺上使用，這也是萬維網(wǎng)盛行的一個原因。 4、通用性：HTML是網(wǎng)絡的通用語言，它允許網(wǎng)頁制作人建立文本與圖片相結合的復雜頁面，這些頁面可以被網(wǎng)上任何其他人瀏覽到，無論使用的是什么類型的電腦或瀏覽器。
當用戶熟悉了靜態(tài)網(wǎng)頁制作后就能感受到它的功能單一，會想建立具有交互性的動態(tài)網(wǎng)站。動態(tài)網(wǎng)站經(jīng)常用到的一個元素就是表單。表單是HTML的一個重要組成部分，是網(wǎng)站管理員與用戶之間溝通的橋梁。
表單標簽--from
是一個雙標簽。標簽中包含的數(shù)據(jù)有表單控件及必須的伴隨數(shù)據(jù)，如控件標簽、處理數(shù)據(jù)的腳本等。主要有表單名稱、數(shù)據(jù)處理、數(shù)據(jù)傳輸方式等5個基本屬性，其中表單的程序處理和數(shù)據(jù)傳輸方式是必不可少的。
程序處理屬性--action
表單本身是沒有用途的，用戶填入表單的信息需要程序來進行處理，表單里的'action'就定義了表單所要提交到的目的文件，該目的文件收到信息后，通常和一個程序連接實現(xiàn)數(shù)據(jù)的處理。
屬性值可以是一個程序，也可以是一個腳本的URL地址
<form action='表單的處理程序'> </form>
##表單名稱屬性--name
用來給表單命名。建議每一表單設定一個功能相符的名稱，防止信息提交到后臺程序處理時出亂。
<form name='表單的名稱'> </form>
##數(shù)據(jù)傳輸方式--method
定義了表單數(shù)據(jù)發(fā)送的方式，數(shù)據(jù)發(fā)送到'action'屬性所規(guī)定的頁面，主要針對服務端進行處理?？勺鳛閁RL變量(method='get')或者HTTP post(method='post')的方式來發(fā)送。
<form method='數(shù)據(jù)傳輸方式'> </form>
#輸入類控件
表單元素也稱表單控件，按照填寫方式分為輸入類和下拉菜單類。用<input>標簽定義。
<form> <input name='控件名稱' type='控件類型'> </form>
文本框--text
最常見的文字輸入?yún)^(qū)域，在登陸區(qū)，討論區(qū)等。在頁面中以單行文本框形式顯示
<input type="text" name="控件名稱" size="文本框長度" maxlength="最大字符數(shù)" value="文本框默認值">
如果希望文本框只讀，可以使用'readonly'設置
<input type="text" name="控件名稱" size="文本框長度" maxlength="最大字符數(shù)" value="文本框默認值" readonly>
密碼框--password
隱藏輸入框內(nèi)容，輸入的字符會用'*'代替
<input type="password" name="控件名稱" size="文本框長度" maxlength="最大字符數(shù)" value="文本框默認值">
單選框--radio
當出現(xiàn)多個選項而且只能選擇一個時，會用到單選框。向指定某個選項默認狀態(tài)下處于選中狀態(tài)時，用'checked'屬性定義。只能有一個單選框設置。要想傳送到處理程序中，需要設置value屬性。
<input type="radio" value="單選框取值" name="單選框名稱" checked>
復選框--checkbox
是可以選多個選項的選項框，也可默認多個選項都處于選中狀態(tài)。
<input type="checkbox" value="單選框取值" name="單選框名稱" checked>
文本域--textarea
主要用于輸入多行文本，常見于留言、評論區(qū)。'rows'文本域行數(shù)，'cols'文本域列數(shù).
<textarea name="文本域名稱" rows="文本域的行數(shù)" cols="文本域的列數(shù)"> </textarea>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表單標簽</title> </head> <body> <form> <h2>用戶注冊頁面</h2> <span>用戶名：</span><input type="text" name="username"><br> 密 碼：<input type="password" name="pwd"><br> <span>確認密碼：</span><input type="password" name="con_pwd"><br> <br> <span>你的年齡是：</span> <input type="radio" name="age" checked>18歲以下 <input type="radio" name="age">19-35歲 <input type="radio" name="age">35歲以上 <br> <span>你的個人愛好：</span> <input type="checkbox" name="habbit">閱讀 <input type="checkbox" name="habbit">寫作 <input type="checkbox" name="habbit">運動 <input type="checkbox" name="habbit">游戲 <input type="checkbox" name="habbit">其他 <br> <span>自我介紹</span> <br> <textarea rows="3" cols="60"></textarea> </form> </body> </html>
按鈕
標準按鈕--button
常見的灰色小來塊，需要關聯(lián)相應的腳本程序來處理表單，'value'可以設置按鈕上要顯示的文本，'onclick'可以實現(xiàn)鼠標處理的一些功能。
<input type="button" value="按鈕上顯示的文本" onclick="處理程序">
提交按鈕和重置按鈕--
是一類特殊的按鈕，不需要設置參數(shù)，也可以實現(xiàn)，表單數(shù)據(jù)處理。一般來說，提交按鈕和重置按鈕同時出現(xiàn)。
<input type="submit" name="按鈕的名字" value="按鈕上顯示的文本"> <input type="reset" name="reset" value="重置">
菜單列表控件
下拉菜單
可以節(jié)省頁面空間。<select>是一個雙標簽。默認只有一個選項被選中。
<option>是單標簽，用來定義下拉菜單中的選項。必須嵌套在<select>標簽里面。'selected'表示初始被選中的選項。
<select name="下拉菜單名稱" size="下拉菜單長度"> <option value="選項值">選項一</option> <option value="選項值">選項二</option> <option value="選項值" selected>選項三</option> </select>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>按鈕</title> </head> <body> <form> <span>用戶名：</span><input type="text" name="username"><br> 密 碼：<input type="password" name="pwd"><br> <br> <span>生日</span> <select> <option value="0">--請選擇--</option> <option value="1">1-4</option> <option value="2">5-9</option> <option value="0">10-12</option> </select> <select> <option value="0">--請選擇--</option> <option value="1">1-10</option> <option value="2">11-20</option> <option value="3">21-31</option> </select> </form> </select> </body> </html>
以上是“HTML中表單的知識點示例”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業(yè)資訊頻道！
免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權內(nèi)容。
