表單高級元素的使用創(chuàng)建用戶反饋表單


表單高級元素的使用上次介紹了表單的基本屬性，主要有text、password" />

国产成人精品无码青草_亚洲国产美女精品久久久久∴_欧美人与鲁交大毛片免费_国产果冻豆传媒麻婆精东

15158846557 或 在線咨詢 在線咨詢
15158846557 或 在線咨詢
所在位置： 首頁 > 營銷資訊 > 網(wǎng)站運營 > HTML5創(chuàng)建表單（下）

HTML5創(chuàng)建表單（下）

時間：2023-07-24 23:09:01 | 來源：網(wǎng)站運營

時間：2023-07-24 23:09:01 來源：網(wǎng)站運營

HTML5創(chuàng)建表單（下）：

前言

我們來結(jié)束HTML5入門系列。上次講了表單創(chuàng)建的基本操作，這次來看表單元素的高級使用。




表單高級元素的使用

上次介紹了表單的基本屬性，主要有text、password、radio、button、submit等。除了基本屬性外，HTML5中還有一些高級屬性，包括url、eamil、time、range、search等。對于這些高級屬性的支持，不同的瀏覽器可能支持程度不一樣，本文主要以Chrome查看效果。

url屬性

url屬性和前面介紹的一樣，用于對網(wǎng)頁網(wǎng)址的說明，顯示為在文本框中輸入url地址。主要是用于驗證url的值，代碼格式如下：

1<input type = "url" name = "userurl1" />對于上述的url屬性，用戶還可以通過普通屬性設(shè)置url輸入框，例如可以使用max屬性設(shè)置其最大值，min屬性設(shè)置其最小值，step屬性設(shè)置合法的數(shù)字間隔、利用value屬性規(guī)定其默認值。這普通屬性對于另外的高級屬性中也適用，后面不再重復。
看一個例子
實現(xiàn)如下效果：


代碼如下：

1<!doctype html> 2<html> 3<head> 4<meta charset="utf-8"> 5<title>表單的高級使用</title> 6</head> 7<body> 8<form> 9請輸入網(wǎng)址：<br>10<input type="url" name="userurl">11</form>12</body>13</html>

email屬性

與URL屬性類似，email屬性主要用于讓瀏覽者輸入E-mail地址。在提交表單時會自動驗證E-mail的值，代碼格式如下：

1<input type = "email" name = "user_email" />看一個例子
實現(xiàn)如下效果：


代碼如下：

1<!doctype html> 2<html> 3<head> 4<meta charset="utf-8"> 5<title>表單的高級使用</title> 6</head> 7<body> 8<form> 9郵箱：10<input type="email" name="user_email" />11<br/>12<input type="submit" value="submit">13</form>14</body>15</html>單擊【submit】，如果郵箱不合法，則會出現(xiàn)如上提示。

date和times

在HTML5中新增了一些日期和時間輸入類型，介紹一些主要的如下表。

屬性含義date選取日、月、年month選取月、年week選取周、年time選取時間datetime選取時間、日、月、年datetime-local選取時間、日、月、年 （本地時間）

上述屬性代碼格式基本類似，以date為例，代碼格式如下：

1<input type = "date" name = "user_date" />看一個例子
實現(xiàn)如下效果：


代碼如下：

1<!doctype html> 2<html> 3<head> 4<meta charset="utf-8"> 5<title>表單的高級使用</title> 6</head> 7<body> 8<form> 9請輸入日期：10<input type="date" name="user_date"><br/>11<br/>12<input type="submit" value="submit">13</form>14</body>15</html>

number屬性和range屬性

number屬性提供了一個輸入數(shù)字的輸入類型。用戶可以直接輸入數(shù)字或者通過單擊微調(diào)框中的按鈕選擇數(shù)字，代碼格式如下：

1<input type = "number" name = "number_1" />建議在用number屬性時用max屬性和min屬性規(guī)定輸入數(shù)字的最大值和最小值。

range屬性提供了一個可以滾動的控件，與number屬性用法差不多。，代碼格式如下：

1<input type = "range" name = "range_1" min = " " max = " "/>看如下一個例子：





實現(xiàn)代碼如下：




1<!doctype html> 2<html> 3<head> 4<meta charset="utf-8"> 5<title>表單的高級使用</title> 6</head> 7<body> 8<form> 9請輸入次數(shù)：10<input type="number" name="shuzi"/>次<br/>11成績排名：12<input type="range" name="ran" min="1" max="10"/>13<br/>14<input type="submit" value="submit">15</form>16</body>17</html>

required屬性

required屬性規(guī)定必須在提交之前填寫輸入域（也就是說不能空）。required屬性幾乎可以用于所有屬性。例子在如下的綜合示例給出。

創(chuàng)建用戶反饋表單

通過一個示例將表單這一部分內(nèi)容串起來。這次我們來開發(fā)一個用戶反饋表單。

第一步：分析需求

反饋表是一個比較簡單的內(nèi)容，一般包括三部分：標題、表單元素、提交按鈕。在設(shè)計時，需要把標題設(shè)置成h1，正文用

標簽來控制?；拘畔?yīng)要求必填。
所要效果如下：


第二步：構(gòu)建HTML5頁面

實現(xiàn)代碼如下：

1<!doctype html> 2<html> 3<head> 4<meta charset="utf-8"> 5<title>用戶反饋頁面</title> 6</head> 7<h1 align="center">用戶反饋標單</h1> 8<form> 9<p>姓&nbsp;&nbsp;&nbsp;&nbsp;名10 <input type="text" required></p>11 <p>性&nbsp;&nbsp;&nbsp;&nbsp;別12 <input type="radio" name="sex" value="man">男13 <input type="radio" name="sex" value="woman">女</p>14 <p>年&nbsp;&nbsp;&nbsp;&nbsp;齡15 <input type="text"></p>16 <p>聯(lián)系電話17 <input type="text" required></p>18 <p>電子郵件19 <input type="email" name="user_eamil" required></p>20 <p>聯(lián)系地址21 <input type="text" required></p>22 <p>請輸入您對網(wǎng)站的建議<br>23 <textarea name="建議" cols="50" rows="5"></textarea></p>24 <input type="submit" name="submit" value="提交">25 <input type="reset" name="reset" value="重置">26</form>27<body>28</body>29</html>這效果可以說很丑陋，因為我們僅僅只使用了HTML5，也是可以原諒的。下此準備開始介紹CSS3，讓它來幫助我們美化。
感謝各位的支持與鼓勵。










編輯不易，歡迎推廣










關(guān)鍵詞：創(chuàng)建

74
73
25
news

版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。

為了最佳展示效果，本站不支持IE9及以下版本的瀏覽器，建議您使用谷歌Chrome瀏覽器。 點擊下載Chrome瀏覽器
關(guān)閉