整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
表單input：表單是用來收集信息的，由表單控件(表單元素)、提示信息、表單域構(gòu)成。
input控件的屬性及值：
除以上屬性外，input元素type屬性還有一個(gè)number屬性值，此為僅可以填數(shù)字，默認(rèn)是可以選擇或者填寫任意數(shù)字，但是當(dāng)type屬性為number屬性值時(shí)，可以使用max和min屬性來限制數(shù)字的取值范圍，input更多屬性見HTML5
<input type="number" min="0"> <!-- min屬性限定最小值為0 -->label標(biāo)簽：
label標(biāo)簽是為input標(biāo)簽服務(wù)的，用于綁定一個(gè)表單元素, 當(dāng)點(diǎn)擊label標(biāo)簽的時(shí)候, 被綁定的表單元素就會獲得輸入焦點(diǎn)
<label> <!-- 1、直接使用label標(biāo)簽包裹要點(diǎn)擊的元素獲得焦點(diǎn) -->
姓名：<input type="text">
</label>
<label for="name">姓名：</label> <!-- 2、使用label標(biāo)簽的for屬性找input元素獲得焦點(diǎn) -->
<input id="name" type="text"/>表單域form：
form元素用于創(chuàng)建一個(gè)表單，form中的所有內(nèi)容都會被提交給服務(wù)器;默認(rèn)form標(biāo)簽中需要有一個(gè)submit按鈕，如果form里面沒有submit按鈕，那么可以使用button中type屬性為submit的button按鈕，這個(gè)buttont按鈕可能不在form表單中，此時(shí)可以給type屬性值為submit的button添加form屬性，值為form表單的id值，如：
<form action="" method="get" name="" id="userform"> <!-- action屬性是指定表單提交給后端的地址，method屬性設(shè)置提交方式，其屬性值有post和get,name屬性用來給表單域定義名字，用于區(qū)分表單域 -->
姓名：<input type="text">
年齡：<input type="number" min="0">
</form>
<button type="submit" form="userform">提交</button>文本域textarea：
input元素只能顯示一行內(nèi)容，textarea元素可以顯示多行，一般做留言效果使用，常常被稱為富文本域。
<!-- rows屬性限定行數(shù)，當(dāng)行數(shù)超過限定后會出現(xiàn)滾動(dòng)條，cols屬性限定的是列數(shù)，當(dāng)超過限定后會換行。 -->
<textarea cols="20" rows="10"></textarea>UEditor：在實(shí)際開發(fā)中如果需要用到比較復(fù)雜的富文本域（類似word的，可以上傳視頻圖片等功能）推薦使用第三方插件，這里推薦大家一款使用的富文本插件：UEditor,使用它可以在網(wǎng)頁中實(shí)現(xiàn)類似word等編輯，如果想要了解更多及方法請查閱官方文檔：http://fex.baidu.com/ueditor/，當(dāng)然類似的富文本編輯器還有很多，如：CKeditor：https://ckeditor.com/等
富文本編輯器可以自己做，其原理是利用document的execCommand()方法，這個(gè)方法實(shí)際開發(fā)中很少用，已經(jīng)廢棄，所以一般很少有人了解，如果想要了解更多，可閱讀官方文檔：https://developer.mozilla.org/zh-CN/docs/Web/API/Document/execCommand
下拉列表(下拉菜單)select：
<body>
<select name="" id="">
<optgroup value="" label="分組1"><!-- optgroup標(biāo)簽用來分組 -->>
<option value="">
測試1
</option>
<option value="">
測試2
</option>
<option value="">
測試3
</option>
</optgroup>
<optgroup value="" label="分組2">
<option value="">選項(xiàng)1</option> <!-- select默認(rèn)選擇第一個(gè)option，當(dāng)給option加selected屬性時(shí)，則會選中此項(xiàng)顯示 -->
<option value="" selected="selected">選項(xiàng)2</option> <!-- selected屬性的selected屬性值可以省略，其效果不變-->
<option value="">選項(xiàng)3</option>
</optgroup>
</select>
</body>塊引用標(biāo)簽：
有的時(shí)候會引用名人名言等，此時(shí)建議使用引用標(biāo)簽，引用標(biāo)簽分為長引用和短引用兩種，長引用標(biāo)簽效果是插入換行和外邊距，短引用標(biāo)簽的效果是加上虛擬的引號。
<blockquote>海上生明月，天涯共此時(shí)。</blockquote><!-- 長引用標(biāo)簽 -->
<q>引號</q><!-- 段引用會給內(nèi)容加上虛擬的引號，這個(gè)引號根本不存在。 -->提示：本文圖片等素材來源于網(wǎng)絡(luò)，若有侵權(quán)，請發(fā)郵件至郵箱：810665436@qq.com聯(lián)系筆者 刪除。
筆者：苦海123
其它問題可通過以下方式聯(lián)系本人咨詢：
QQ：810665436
微信：ConstancyMan
例
帶有兩個(gè)輸入字段和一個(gè)提交按鈕的 HTML 表單：
<form action="demo_form.php" method="get">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="提交">
</form>
（更多實(shí)例見頁面底部）
瀏覽器支持
所有主流瀏覽器都支持 <form> 標(biāo)簽。
標(biāo)簽定義及使用說明
<form> 標(biāo)簽用于創(chuàng)建供用戶輸入的 HTML 表單。
<form> 元素包含一個(gè)或多個(gè)如下的表單元素：
<input>
<textarea>
<button>
<select>
<option>
<optgroup>
<fieldset>
<label>
HTML 4.01 與 HTML5之間的差異
HTML5 新增了兩個(gè)新的屬性：autocomplete 和 novalidate，同時(shí)不再支持 HTML 4.01 中的某些屬性。
HTML 與 XHTML 之間的差異
在 XHTML 中，name 屬性已被廢棄。使用全局 id 屬性代替。
屬性
New ：HTML5 中的新屬性。
| 屬性 | 值 | 描述 |
|---|---|---|
| accept | MIME_type | HTML5 不支持。規(guī)定服務(wù)器接收到的文件的類型。（文件是通過文件上傳提交的） |
| accept-charset | character_set | 規(guī)定服務(wù)器可處理的表單數(shù)據(jù)字符集。 |
| action | URL | 規(guī)定當(dāng)提交表單時(shí)向何處發(fā)送表單數(shù)據(jù)。 |
| autocompleteNew | onoff | 規(guī)定是否啟用表單的自動(dòng)完成功能。 |
| enctype | application/x-www-form-urlencodedmultipart/form-datatext/plain | 規(guī)定在向服務(wù)器發(fā)送表單數(shù)據(jù)之前如何對其進(jìn)行編碼。（適用于 method="post" 的情況） |
| method | getpost | 規(guī)定用于發(fā)送表單數(shù)據(jù)的 HTTP 方法。 |
| name | text | 規(guī)定表單的名稱。 |
| novalidateNew | novalidate | 如果使用該屬性，則提交表單時(shí)不進(jìn)行驗(yàn)證。 |
| target | _blank_self_parent_top | 規(guī)定在何處打開 action URL。 |
全局屬性
<form> 標(biāo)簽支持 HTML 的全局屬性。
事件屬性
<form> 標(biāo)簽支持 HTML 的事件屬性。
實(shí)例
帶有復(fù)選框的表單
此表單包含兩個(gè)復(fù)選框和一個(gè)提交按鈕。
帶有單選按鈕的表單
此表單包含兩個(gè)單選框和一個(gè)提交按鈕。
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
Button 對象
Button 對象代表 HTML 文檔中的一個(gè)按鈕。
該元素沒有默認(rèn)的行為，但是必須有一個(gè) onclick 事件句柄以便使用。
在 HTML 文檔中 <input type="button"> 標(biāo)簽每出現(xiàn)一次，一個(gè) Button 對象 就會被創(chuàng)建。
您可以通過遍歷表單的 elements[] 數(shù)組來訪問某個(gè)按鈕，或者通過使用 document.getElementById()。
Button 對象屬性
W3C: W3C 標(biāo)準(zhǔn)。
| 屬性 | 描述 | W3C |
|---|---|---|
| disabled | 設(shè)置或返回是否禁用按鈕。 | Yes |
| form | 返回對包含該按鈕的表單對象的引用。 | Yes |
| name | 設(shè)置或返回按鈕的名稱。 | Yes |
| type | 返回按鈕的表單元素類型。 | Yes |
| value | 設(shè)置或返回在按鈕上顯示的文本。 | Yes |
標(biāo)準(zhǔn)屬性和事件
Button 對象同樣支持標(biāo)準(zhǔn)的屬性 和 事件。
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
*請認(rèn)真填寫需求信息，我們會在24小時(shí)內(nèi)與您取得聯(lián)系。
