HTML5簡介:
定義:HTML5號稱下一代HTML,html的最新版本,定義了新的標簽、css、JavaScript,html5新標簽IE9以上版本瀏覽器才兼容,因此在實際開發中要問老板是否兼容低版本瀏覽器。
擴展內容:語義化標簽、本地儲存、兼容特性、2D 3D、動畫 過渡、CSS3新特性、性能與集成
HTML5常用新標簽:
HTML5標簽多為語義化標簽,主要是針對瀏覽器搜索引擎,IE9瀏覽器中主要將所有語義化標簽都轉化為塊級元素,語義化標簽在移動端支持比較好,后面會有更多語義化標簽學習。
HTML5常用新標簽:
datalist選項輸入框:
此標簽和input標簽搭配可以實現input輸入提示,注意:input標簽中必須要有list屬性,其值綁定的是datalist的id值,option標簽中的value值不能為空,否則此功能失效。
<body>
<input type="text" value="輸入科目" list="lis" >
<datalist id='lis'>
<option value="科目1"></option>
<option value="科目2"></option>
<option value="科目3"></option>
<option value="科目4"></option>
</datalist>
</body>
fieldset表單元素分組:
此標簽和legend標簽搭配可以將表單內相關元素分組(外部用一個矩形的方框包裹)
<body>
<fieldset>
<legend>用戶信息</legend> <!-- 矩形框邊插入的文本信息,去掉此標簽則為 封閉的矩形 -->
<input type="text" value="user"><br>
<input type="password" value="password">
</fieldset>
</body>
html5中input標簽的type屬性新增屬性值:
input中新增屬性:
提示:本文圖片等素材來源于網絡,若有侵權,請發郵件至郵箱:810665436@qq.com聯系筆者 刪除。
筆者:苦海123
其它問題可通過以下方式聯系本人咨詢:
QQ:810665436
微信:ConstancyMan
、表單標簽Form
1. 什么是表單
表單在網頁中負責數據采集功能的。表單是有3部分組成:
(1)表單標簽 <form></form>
(2)表單域
(3)表單按鈕
2. Form標簽、
語法格式:
<form action=”url” method=”get|post”>
</form>
TML5 為前端開發者帶來了許多表單增強功能,這些功能使得創建交互式和用戶友好的表單變得更加容易。在本文中,我們將介紹幾種 HTML5 新增的表單功能,并提供完整的 HTML 示例,以幫助你了解如何在實際項目中應用這些功能。
HTML5 引入了一系列新的 input 類型,以支持更多種類的數據輸入,比如電子郵件、日期等。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>電子郵件和網址輸入示例</title>
<style>
body {
font-family: Arial, sans-serif; /* 設置字體 */
padding: 20px; /* 頁面內邊距 */
}
form {
max-width: 400px; /* 表單最大寬度 */
margin: 0 auto; /* 居中顯示 */
padding: 20px; /* 表單內邊距 */
border: 1px solid #ccc; /* 邊框樣式 */
border-radius: 5px; /* 邊框圓角 */
background-color: #f9f9f9; /* 背景顏色 */
}
label {
display: block; /* 使標簽獨占一行 */
margin-bottom: 5px; /* 標簽下方間距 */
font-weight: bold; /* 字體加粗 */
}
input[type="email"],
input[type="url"] {
width: 100%; /* 輸入框寬度 */
padding: 8px; /* 內邊距 */
margin-bottom: 20px; /* 與下一個元素的間距 */
border: 1px solid #ccc; /* 邊框樣式 */
border-radius: 4px; /* 邊框圓角 */
}
input[type="submit"] {
background-color: #007bff; /* 背景顏色 */
color: white; /* 字體顏色 */
padding: 10px 20px; /* 內邊距 */
border: none; /* 無邊框 */
border-radius: 4px; /* 邊框圓角 */
cursor: pointer; /* 鼠標樣式 */
font-size: 16px; /* 字體大小 */
}
input[type="submit"]:hover {
background-color: #0056b3; /* 鼠標懸停時的背景顏色 */
}
</style>
</head>
<body>
<form>
<label for="email">電子郵件:</label>
<input type="email" id="email" name="email" required>
<label for="url">個人網站:</label>
<input type="url" id="url" name="url">
<input type="submit" value="提交">
</form>
</body>
</html>
在這個示例中,我們使用了 type="email" 和 type="url" 來要求用戶輸入有效的電子郵件地址和網址。如果用戶輸入的不符合格式,瀏覽器會在提交表單前顯示一個警告。
placeholder 屬性允許我們在輸入字段中設置一個提示文本,當輸入字段為空時顯示,一旦開始輸入,提示文本就會消失。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>帶占位符的輸入框示例</title>
<style>
body {
font-family: Arial, sans-serif; /* 設置字體 */
padding: 20px; /* 頁面內邊距 */
}
form {
max-width: 300px; /* 表單最大寬度 */
margin: 0 auto; /* 居中顯示 */
padding: 20px; /* 表單內邊距 */
border: 1px solid #ccc; /* 邊框樣式 */
border-radius: 5px; /* 邊框圓角 */
background-color: #f9f9f9; /* 背景顏色 */
}
label {
display: block; /* 使標簽獨占一行 */
margin-bottom: 10px; /* 標簽下方間距 */
font-weight: bold; /* 字體加粗 */
}
input[type="search"] {
width: calc(100% - 22px); /* 輸入框寬度,減去內邊距和邊框的寬度 */
padding: 10px; /* 內邊距 */
margin-bottom: 20px; /* 與下一個元素的間距 */
border: 1px solid #ccc; /* 邊框樣式 */
border-radius: 4px; /* 邊框圓角 */
box-sizing: border-box; /* 盒子模型,使寬度包含邊框和內邊距 */
}
input[type="submit"] {
background-color: #007bff; /* 背景顏色 */
color: white; /* 字體顏色 */
padding: 10px 20px; /* 內邊距 */
border: none; /* 無邊框 */
border-radius: 4px; /* 邊框圓角 */
cursor: pointer; /* 鼠標樣式 */
font-size: 16px; /* 字體大小 */
}
input[type="submit"]:hover {
background-color: #0056b3; /* 鼠標懸停時的背景顏色 */
}
</style>
</head>
<body>
<form>
<label for="search">搜索:</label>
<input type="search" id="search" name="search" placeholder="請輸入搜索關鍵字">
<input type="submit" value="搜索">
</form>
</body>
</html>
這里的 placeholder="請輸入搜索關鍵字" 就是一個占位符,它會在用戶輸入之前顯示在搜索框中。
autofocus 屬性可以讓頁面加載時自動將焦點放到某個表單元素上。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>自動聚焦的輸入框示例</title>
</head>
<body>
<form>
<label for="name">姓名:</label>
<input type="text" id="name" name="name" autofocus>
<input type="submit" value="提交">
</form>
</body>
</html>
在這個示例中,當頁面加載完成后,姓名輸入框將自動獲得焦點。
HTML5 為表單驗證提供了內置支持,通過簡單的屬性如 required、min、max 和 pattern 等,可以在不使用 JavaScript 的情況下進行基本的驗證。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>表單驗證示例</title>
<style>
body {
font-family: 'Arial', sans-serif;
padding: 20px;
background-color: #f4f4f4;
}
form {
max-width: 400px;
margin: 0 auto;
padding: 20px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
label {
display: block;
margin-bottom: 10px;
font-weight: bold;
color: #333;
}
input[type="number"],
input[type="text"] {
width: 100%;
padding: 8px;
margin-bottom: 20px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box; /* 包括邊框和內邊距在內的寬度 */
}
input[type="submit"] {
width: 100%;
padding: 10px;
background-color: #007bff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
}
input[type="submit"]:hover {
background-color: #0056b3;
}
input:invalid {
border-color: red;
}
input:valid {
border-color: green;
}
</style>
</head>
<body>
<form>
<label for="age">年齡:</label>
<input type="number" id="age" name="age" min="18" max="99" required>
<label for="zipcode">郵編:</label>
<input type="text" id="zipcode" name="zipcode" pattern="\d{5}" title="請輸入5位數字的郵編" required>
<input type="submit" value="提交">
</form>
</body>
</html>
在這個示例中,年齡字段要求用戶輸入一個介于 18 到 99 之間的數字,而郵編字段要求用戶輸入一個符合特定模式(5位數字)的文本。
HTML5 的表單增強功能大大簡化了表單處理和驗證的工作,使得開發更加高效,同時也提高了用戶體驗。通過上述示例,我們可以看到,利用 HTML5 的新特性,可以創建功能強大且易于使用的表單。隨著技術的不斷進步,我們作為開發者應該不斷學習和實踐,以便更好地利用這些新工具來構建更好的網頁。
*請認真填寫需求信息,我們會在24小時內與您取得聯系。