HTML input url域
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> </head> <body> <form name="myform" method="post" action="do.php"> <input type="url" name="url"/> <input type="submit" value="提交表單"/> </form> </body> </html>
上面的程式碼簡單演示了url域的用法,如果輸入不是合法url地址會報錯。
特別說明:name屬性是必須的,否則後臺無法接收提交的表單資料。
url域還有其他屬性,下面分別做一下介紹:
(1).value:規定url域的預設值,也就是我們所看到的url域中的內容。
(2).size:是一種視覺化設計屬性,推薦使用css的width屬性替代。
(3).maxlength:規定url域可以輸入的最大字元數。
(4).placeholder(HTML5):提供一種提示,描述所期待的值。
(5).required(HTML5):規定url域內容是必填的。
(6).pattern(HTML5):規定用於驗證url域內容格式的正規表示式。
(7).list(HTML5):規定url域的datalist,具體參閱HTML datalist選項列表一章節。
(8).form(HTML5):規定url域所屬的一個或多個表單。
(9).autofocus(HTML5):規定在頁面載入時,域自動地獲得焦點。
(10).autocomplete(HTML5):規定url域是否具有自動完成功能。
程式碼例項:
[HTML] 純文字檢視 複製程式碼執行程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> </head> <body> <form name="myform" method="post" action="do.php"> url:<input type="url" maxlength="10" name="url"> <input type="submit" value="提交表單" /> </form> </body> </html>
設定文字域輸入輸入字元最大個數為10。
[HTML] 純文字檢視 複製程式碼執行程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> </head> <body> <form name="myform" method="post" action="do.php"> url:<input type="url" required placeholder="輸入電話號碼" name="url"> <input type="submit" value="提交表單" /> </form> </body> </html>
通過placeholder屬性規定url域期望輸入的內容;required屬性只有一個值"required"(可以省略),它規定url域是必填,內容不能為空,否則會報錯。
[HTML] 純文字檢視 複製程式碼執行程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> </head> <body> <form name="myform" method="post" action="do.php"> url:<input type="text" placeholder="輸入網址" pattern="^http(s)?://([\w-]+\.)+(/?[\w\-./?%&=]*)?$" name="url"> <input type="submit" value="提交表單"/> </form> </body> </html>
pattern屬性值是一段正規表示式,用來限制url域輸入內容的格式,上面的程式碼使用pattern來規定url域輸入內容必須是以http或者https開頭的網址,否則會報錯。上面的驗證提示並不友好,可以參閱HTML5 pattern自定義驗證提示一文。
[HTML] 純文字檢視 複製程式碼執行程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> </head> <body> <form name="myform" method="post" action="do.php"> url:<input type="url" autocomplete="on" autofocus name="url"> <input type="submit" value="提交表單"/> </form> </body> </html>
autofocus只有一個屬性值"autofocus"(可以省略),它規定url域在頁面載入後自動獲取焦點;autocomplete有兩個屬性值on和off,on規定url域列出之前已經填寫過的內容,off的功能與之相反。
[HTML] 純文字檢視 複製程式碼執行程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> </head> <body> <form name="myform" id="ant" method="post" action="do.php"> <input type="submit" value="提交表單"/> </form> url:<input type="text" form="ant" name="url"> </body> </html>
form屬性引用所屬表單的id,於是,雖然url域在<form>之外,但依然是該表單的一部分。
相關文章
- HTML input tel 撥號域HTML
- HTML input search搜尋域HTML
- HTML input email郵箱域HTMLAI
- HTML input file檔案域HTML
- HTML input email 郵箱域HTMLAI
- HTML input file 檔案域HTML
- HTML input text單行文字域HTML
- HTML input hidden隱藏域HTML
- HTML input hidden 隱藏域HTML
- HTML input rangeHTML
- HTML input 元素概述HTML
- HTML input date calendarHTML
- HTML input image按鈕HTML
- HTML input image 按鈕HTML
- HTML input button按鈕HTML
- HTML input button 按鈕HTML
- HTML input submit 按鈕HTMLMIT
- HTML 25 - Input AttributesHTML
- 使用url()後出現No input file specified.
- HTML input reset 重置按鈕HTML
- HTML input color 拾色器HTML
- HTML input password密碼框HTML密碼
- HTML input password 密碼框HTML密碼
- HTML input time calendar 控制元件HTML控制元件
- HTML input submit和reset按鈕HTMLMIT
- HTML input checkbox 核取方塊HTML
- HTML標籤之form,input,button,tableHTMLORM
- HTML input number 數字控制元件HTML控制元件
- HTML input checkbox核取方塊HTML
- HTML input datetime calendar控制元件HTML控制元件
- HTML表單中的input標籤HTML
- URL vs. HTML 錄製模式HTML模式
- HTML input radio 單選按鈕HTML
- input的type值型別和描述-HTML型別HTML
- HTML input week帶周calendar控制元件HTML控制元件
- HTML input month帶月calendar控制元件HTML控制元件
- HTML input radio單選按鈕HTML
- HTML <output> 輸出域HTML