整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          Java 0基礎入門 (Html表單、表單元素)

          一篇: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指定視頻窗口大小

          單元素初識

          我們在瀏覽網頁時會經常遇到注冊會員的界面,大概像這個樣子:

          或填寫問卷的情況,大概像這個樣子:

          我們把這些內容稱之為表單。

          如何向自己的頁面中添加表單呢?

          添加表單的操作和添加表格類似。

          首先我們要在頁面中寫入<form></form>標簽,這是向瀏覽器聲明這里是個表單,它本身并不會顯示在頁面中,但是可以全局控制表單元素的一些屬性,就像表格中的<table></table>標簽。

          然后再在<form></form>中寫入<input/>標簽,這個標簽的內容就會顯示在頁面中了,就像表格元素中的<tr><td>標簽。不同的是<input/>沒有結尾標簽。

          下面讓我們寫一寫。

          首先復制"第一個頁面.html"文件。改名為"表單.html",然后清空<body></body>中的內容,將<head></head>中間的<title></title>中間的內容改為"表單",這樣方便我們查看測試頁面。

          示例代碼如下:

          <!DOCTYPE HTML>
            <html>
            <head> 
            <title>表單 </title>
            </head> 
            <body>
            </body>
            </html>

          下面我們要寫入表單內容,示例代碼如下:

          <form> <input/></form>

          頁面效果如下:

          只有一個輸入框。下面,我們為輸入框添加名稱"會員名稱:",示例代碼如下:

          <form> 會員名稱: <input/></form>

          效果如下:

          這樣我們就寫出了一個簡單的表單,如果為表單添加更多內容和設置,就要繼續了解表單的屬性。

          表單元素屬性1

          <input/>標簽通過改變type屬性可以變換出不同功能,在頁面制作中,我認為<input/>標簽中的type屬性最重要。

          下面我們來看一下type屬性不同的值。

          圖片來源W3School

          輸入文字:首先,先來看text值。說明很明確,這個屬性值的<input>標簽主要是用來輸入文本,比如"會員名稱。"

          示例代碼如下:

          <form> 會員名稱: <input type="text"/></form>

          頁面效果如圖所示:我胡亂輸入了幾個字母

          如果不指定type的text值的話,表面看起來并不影響輸入內容,但是表單的內容最終是要提交到服務器的,如果不注明type="text",服務器就不能判斷你輸入的字符到底是一段代碼還是一段字符串組成的文本,因此,我們為了讓提的交數據在服務器端能被準確識別,一定要寫好type的屬性。

          除此之外變換type值也能為<input/>變換不同功能。

          制作提交按鈕:例如"submit"(提交)。在我們輸入完表單內容后,一般都有一個提交按鈕,這個提交按鈕也是由<input/>標簽來完成的。

          示例代碼如下:

          <form> 會員名稱: <input type="text"/> <input type="submit"/></form>

          如圖所示:

          因為<input/>是內聯元素,所以"submit"按鈕會和之前的<input>顯示在一行,換行的話很簡單,可以使用<br>標簽。

          大家觀察一下發現,我們并沒有給"submit"按鈕指定文字,在按鈕上卻出現了"提交查詢"的字樣,這是html默認的,如果我們要改變按鈕文字就要使用value這個屬性。示例代碼如下:

          <input type="submit" value = "提交"/>

          頁面效果如下:

          其實我們在輸入文字時,輸入框里會經常有提示文字,當我們點擊輸入框時,提示文字消失了,這個功能怎么實現?

          這又涉及到一個新屬性,叫做"placeholder"(提示文字)。

          示例代碼如下:

          <input type="text" placeholder = "請輸入英文或漢語拼音"/>

          頁面效果如下:

          下面我們來練習一下,示例代碼如下:

          <form>
            會員名稱:
          <input type = "text" placeholder = "請輸入英文或漢語拼音"/><br>
            會員密碼:<input type = "text" placeholder = "請輸入英文字母、特殊符號、數字"/><br>
            確認密碼:<input type = "text" /><br><input type = "submit" value = "提交"/><br>
          </form>

          頁面效果如下:(想把密碼字符顯示為小圓點的讀者可以先去屬性值列表中找找"password"看看,咱們后面會細致講解)

          制作多選表單:多選表單的type屬性值是"checkbox"。

          我猜大家也猜到該怎么寫了,示例代碼如下:

          <form>
            興趣愛好:<br>
            <input type = "checkbox" name="hobby" value = "reading"/>讀書
            <input type = "checkbox" name="hobby" value = "film"/>電影
            <input type = "checkbox" name="hobby" value = "painting"/>繪畫
            <input type = "checkbox" name="hobby" value = "music"/>音樂
            <br>
            <input type = "submit" value = "submit"/>
            </form>

          頁面效果如下:

          大家可以點點試試,可以多選了。如圖:

          這時小伙伴們會發現在這組示例中,出現了name和value兩個屬性。

          先說value,在"submit"中,value的值也就是"提交"二字,是直接顯示在按鈕上的,而這里的value值卻沒有顯示,顯示出來的是我們在<input/>標簽后面輸入的"讀書、電影、繪畫、音樂"這樣的字樣。也就是說這里的value不會顯示為選框的名字!

          那value屬性是干嘛的呢?實際上"checkbox"屬性下的value屬性值是寫給后臺的服務器看的。

          我們向服務器提交選擇后,服務器把name的名稱作為數據的大類名稱,把value值作為大類中的子類名稱來存儲或分析數據。

          比如這個選擇表單是有關興趣愛好的,因此數據的大類屬于"愛好"(hobby),即name="hobby",hobby中又分為"reading"(讀書),"film"(電影),"painting"(繪畫),"music"(音樂),即value="reading"、value="film"等等。這樣不同用戶的不同選擇就按照這個數據組織方式提交給了服務器。

          大家明白了嗎?

          另外需要說明的是,name和value最好使用英文或拼音來書寫!

          雖然我們目前不涉及后端服務器上的操作,但是在學習時要養成規范書寫的習慣。

          其實,除了type="submit"的情況外,其他需要輸入信息的type屬性類型都是要寫name屬性的,不過不同type屬性類型的value卻不太一樣

          下面我們來看看type="text"時的標準寫法:當type="text"的時候,不必寫value屬性,因為value值為用戶輸入的內容

          <form>
            會員名稱:
            <input type = "text" placeholder = "請輸入英文或漢語拼音" name="memberName"/><br>
            會員密碼:
            <input type = "text" placeholder = "請輸入英文字母、特殊符號、數字" name="passWord"/><br>
            確認密碼:<input type = "text" name="confirmPassWord"/><br>
            <input type = "submit" value = "提交"/><br>
          </form>

          今天的內容先到這里,我們明天繼續講解"表單元素"。

          喜歡的小伙伴請關注和轉發,閱讀中遇到任何問題請給我留言,如有疏漏或錯誤歡迎大家斧正,不勝感激!

          HTML完整學習目錄

          HTML序章(學習目的、對象、基本概念)——零基礎自學網頁制作

          HTML是什么?——零基礎自學網頁制作

          第一個HTML頁面如何寫?——零基礎自學網頁制作

          HTML頁面中head標簽有啥用?——零基礎自學網頁制作

          初識meta標簽與SEO——零基礎自學網頁制作

          HTML中的元素使用方法1——零基礎自學網頁制作

          HTML中的元素使用方法2——零基礎自學網頁制作

          HTML元素中的屬性1——零基礎自學網頁制作

          HTML元素中的屬性2(路徑詳解)——零基礎自學網頁制作

          使用HTML添加表格1(基本元素)——零基礎自學網頁制作

          使用HTML添加表格2(表格頭部與腳部)——零基礎自學網頁制作

          使用HTML添加表格3(間距與顏色)——零基礎自學網頁制作

          使用HTML添加表格4(行顏色與表格嵌套)——零基礎自學網頁制作

          16進制顏色表示與RGB色彩模型——零基礎自學網頁制作

          HTML中的塊級元素與內聯元素——零基礎自學網頁制作

          初識HTML中的<div>塊元素——零基礎自學網頁制作

          在HTML頁面中嵌入其他頁面的方法——零基礎自學網頁制作

          封閉在家學網頁制作!為頁面嵌入PDF文件——零基礎自學網頁制作

          HTML表單元素初識1——零基礎自學網頁制作

          HTML表單元素初識2——零基礎自學網頁制作

          HTML表單3(下拉列表、多行文字輸入)——零基礎自學網頁制作

          HTML表單4(form的action、method屬性)——零基礎自學網頁制作

          HTML列表制作講解——零基礎自學網頁制作

          為HTML頁面添加視頻、音頻的方法——零基礎自學網頁制作

          音視頻格式轉換神器與html視頻元素加字幕——零基礎自學網頁制作

          HTML中使用<a>標簽實現文本內鏈接——零基礎自學網頁制作

          端框架Layui的頁面元素form表單比較使用起來簡單,通過在容器中設定class="layui-form"標識一個form表單元素塊,通過layui內置的form模塊可以完成各種交互,包括表單的各種驗證,因此需要依賴加載內置的form模塊,如果不加載form模塊,select、checkbox、radio等元素無法正常顯示,并且無法使用form相關交互功能。

          關于layui框架相關文件的加載,移步《你家隔壁程序猿推薦一款優秀的模塊化UI框架-Layui》查看,這里采用的是模塊化加載方式。

          使用form元素,加載form模塊的方式如下:

          <script>
          layui.use('form', function(){
           var form = layui.form;
          });
          </script>

          先看一個整體表單,代碼如下:

          上述代碼效果如下:

          是不是有點丑?那是因為我將form表單放在了一個設定了class="layui-main"的div中,整體寬度為1140px,而form元素最基本的行區塊結構(下面有介紹)提供了響應式的支持。

          為解決表單大小的問題,我預設了幾個樣式來規范input的大小,分別為:

          .input-mini { width: 72px }
          .input-small { width: 90px }
          .input-medium { width: 150px }
          .input-large { width: 210px }
          .input-xlarge { width: 300px }
          .input-xxlarge { width: 540px }

          然后,我再上述表單中的layui-input后面追加了對應的input-{size}類名,組合成新的表單,感覺好多了,新樣式如下:

          行區塊結構

          現在介紹一下form表單的基本行區塊結構:

          <div class="layui-form-item">
           <label class="layui-form-label">標簽區域</label>
           <div class="layui-input-block">
           <!--原始表單元素區域-->
           <input type="text" name="title" required lay-verify="required" placeholder="請輸入標題" autocomplete="off" class="layui-input">
           </div>
          </div>

          當然,你可以修改這個行區塊結構,或者完全拋棄這個結構,用自己的結構。其中,required注冊瀏覽器所規定的必填字段,與平常的HTML表單沒區別;lay-verify注冊form模塊需要驗證的類型,form模塊驗證需要用到;class="layui-input"是layui.css提供的通用CSS類。

          比如,當我設置手機號碼為必填項時,不寫的情況下提交表單會有對應的彈窗提示,實際效果如下:

          下拉選擇框

          layui表單的基本下拉選擇框已經在上述案例中展示了,不多說了,與常規的select元素沒啥區別,有區別的是通過給select設定lay-search屬性可以開啟搜索匹配功能。

          代碼如下:

          <select name="city" lay-verify="required" lay-search>
          <option value=""></option>
          <option value="1">上海</option>
          <option value="2">廣州</option>
          <option value="3">深圳</option>
          <option value="4">杭州</option>
          <option value="5">鄭州</option>
          </select>

          開關按鈕

          layui提供了開關表單元素,本質上是CheckBox復選框的變種,通過設定 lay-skin="switch" 形成開關風格,

          <input type="checkbox" name="kaiguan" lay-skin="switch" lay-text="ON|OFF" checked>

          通過屬性lay-text自定義開關兩種狀態的文本,設置value=""自定義值,不設置的話,選中時返回默認的on。

          其他表單元素,比如單選、復選框等與常規的一樣。

          忽略美化渲染

          如果不喜歡layui的ui,layui還提供了lay-ignore屬性,禁止layui對標簽進行美化渲染。使用比較簡單,比如:

          <select name="city" lay-verify="required" lay-search lay-ignore>
          <option value=""></option>
          </select>

          設置后,表單會保留原有系統風格,不過layui提供相應的接口和交互也會失效,這個例子中不能搜索了。

          layui組裝行內表單

          layui的行內表單其實是改變了原有的表單元素區塊接口,比較簡單,比如價格范圍表單:

          好了,這就是layui表單form的基本介紹,下次將推layui頁面元素之導航模塊。


          主站蜘蛛池模板: 日韩av片无码一区二区三区不卡| 久久国产午夜精品一区二区三区| 无码人妻精品一区二区三区夜夜嗨| 久久久久久人妻一区二区三区| 精品无码一区二区三区爱欲 | 国产在线一区二区在线视频| 杨幂AV污网站在线一区二区| 男人的天堂亚洲一区二区三区| 国产在线观看91精品一区| 国产乱人伦精品一区二区| 美女毛片一区二区三区四区| 色窝窝无码一区二区三区成人网站 | 在线精品日韩一区二区三区| 亚洲欧美日韩国产精品一区| 国产精品一区二区毛卡片| 久久精品无码一区二区三区免费 | A国产一区二区免费入口| 国产成人综合精品一区| 亚洲一区二区三区偷拍女厕| 精品久久一区二区| 精品国产福利一区二区| 日本一区二区三区免费高清| 在线观看国产一区亚洲bd| 美女免费视频一区二区| 精品一区二区三区四区在线| 久久中文字幕一区二区| 91无码人妻精品一区二区三区L| 精品深夜AV无码一区二区老年| 在线成人综合色一区| 久99精品视频在线观看婷亚洲片国产一区一级在线 | 国产一区二区女内射| 精品视频一区二区三区在线观看| 在线观看国产一区二区三区| 99久久精品国产高清一区二区 | 制服丝袜一区在线| 日韩一区二区超清视频| 韩国精品福利一区二区三区| 色综合视频一区二区三区 | 无码中文字幕乱码一区| 成人在线观看一区| 精品乱子伦一区二区三区|