H5 Mosh教程筆記
先列出教程中會用到的網(wǎng)站
網(wǎng)站H5規(guī)范驗證網(wǎng)站
CSS格式規(guī)范驗證網(wǎng)站
轉(zhuǎn)義字符查詢
免費圖片下載網(wǎng)站
免費圖片視頻下載網(wǎng)站
瀏覽器HTML標(biāo)簽，CSS屬性支持情況查詢網(wǎng)站
CSS一致化工具安裝
漸變色代碼生成網(wǎng)站
CSS形狀代碼生成網(wǎng)站
字體網(wǎng)站fontsquirrel
字體網(wǎng)站fonts
字體網(wǎng)站myfonts
rem字體大小預(yù)覽網(wǎng)站
css雪碧圖工具網(wǎng)站割捅，或者谷歌一下css sprites
DataURI生成網(wǎng)站宴倍，或者谷歌一下Data URI Generator
CSS濾鏡展示
圖片裁切工具網(wǎng)站掩宜，或者谷歌一下CSS Clip Generator
不同分辨率圖片生成網(wǎng)站
圖片格式轉(zhuǎn)換網(wǎng)站
矢量圖背景網(wǎng)站
圖標(biāo)字體網(wǎng)站
表單提交測試網(wǎng)站
教程開始
· 表單
· 創(chuàng)建基本表單
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
line-height: 1.5;
}
label {
display: block;
}
/* 選擇input標(biāo)簽里type為text和email的 */
input[type="text"],
input[type="email"] {
border: 1px solid #ccc;
border-radius: 5px;
padding: 0.5rem 0.7rem;
}
/* 設(shè)置input標(biāo)簽屬性為text和email的，在獲得焦點時的樣式 */
input[type="text"]:focus,
input[type="email"]:focus {
color: #7db0fb;
outline: 0;
box-shadow: 0 0 0 4px rgba(24, 117, 255, 0.25);
/* 設(shè)置過渡效果觉啊，邊框顏色過渡時間0.15s驼侠，陰影過度時間0.15s，避免邊框出現(xiàn)的太突然 */
transition: border-color 0.15s, box-shadow 0.15s;
}
button {
background: #0d6efd;
color: #fff;
border: 0;
padding: 0.5rem 0.7rem;
border-radius: 5px;
}
.form-group {
margin-bottom: 1rem;
}
</style>
</head>
<body>
<form action="">
<div class="form-group">
<label for="name">Name</label>
<input id='name' type="text">
</div>
<div class="form-group">
<label for="email">Email</label>
<input id='email' type="email">
</div>
<button type="submit">Register</button>
<button type="reset">Reset</button>
</form>
</body>
</html>
· CSS框架
CSS框架是已經(jīng)寫好的CSS樣式榨了，我們只需要使用就好，常見的如bootstrap攘蔽，Milligram等龙屉，使用前只需要引入對應(yīng)的樣式文件，學(xué)習(xí)或者記住相關(guān)的CSS類满俗，就可以很快的搭建出一個好看的網(wǎng)站转捕，例子中使用的是Milligram作岖，不需要寫或綁定任何CSS類，就已經(jīng)有一個不錯的效果了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<!-- CSS only -->
<link
rel="stylesheet"
/>
<style></style>
</head>
<body>
<form class="" action="">
<div class="">
<label class="" for="name">Name</label>
<input class="" id="name" type="text" />
</div>
<div class="mb-3">
<label class="" for="email">Email</label>
<input class="" id="email" type="email" />
</div>
<button class="" type="submit">Register</button>
<button class="" type="reset">Reset</button>
</form>
</body>
</html>
· 文字輸入?yún)^(qū)域
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link
rel="stylesheet"
/>
<style>
form {
width: 50%;
}
textarea {
resize: none;
}
</style>
</head>
<body>
<form action="">
<!-- input的類型可以是text五芝，email痘儡，password，number等 -->
<input type="text">
<textarea name="" id="" cols="30" rows="10"></textarea>
<!-- input的類型可以是text枢步，email谤辜，password，number等 -->
<!-- input和textarea標(biāo)簽的還有其他參數(shù)价捧，如placeholder，占位文字 -->
<!-- readonly values=""涡戳，只讀结蟋，并顯示value內(nèi)容 -->
<!-- disabled values""，禁用標(biāo)簽渔彰，并顯示value內(nèi)容嵌屎，提交表單時，也不會提交該內(nèi)容" -->
<!-- maxlength恍涂，最大長度宝惰，超過最大長度便不能在輸入 -->
<!-- autofocus，頁面加載完成后自動獲取焦點 -->
<input type="text" placeholder="Email">
<textarea name="" id="" cols="30" rows="10"></textarea>
</form>
</body>
</html>
· 數(shù)據(jù)列表(輸入建議列表)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link
rel="stylesheet"
/>
</head>
<body>
<form action="">
<!-- 通過ID可以讓兩個標(biāo)簽關(guān)聯(lián)起來再沧，這里的datalist就是關(guān)聯(lián)了list為countries的input標(biāo)簽 -->
<!-- 所以點擊input標(biāo)簽時尼夺，展示出數(shù)據(jù)列表 -->
<!-- options里的value是提交表單時，需要傳給服務(wù)器的值 -->
<!-- 但options里的value會顯示在列表里炒瘸，需要重新命名一個屬性淤堵，這里命名為data-value -->
<!-- 再用JS來讀取這個屬性 -->
<!-- autocomplete，自動補全輸入內(nèi)容顷扩，瀏覽器會記住上次的輸入并提示補全拐邪，可以關(guān)閉或開啟 -->
<input list="countries" type="text" autocomplete="off">
<datalist id="countries">
<option data-value="1">China</option>
<option data-value="2">USA</option>
<option data-value="3">England</option>
<option data-value="4">Koera</option>
</datalist>
</form>
</body>
</html>
· Drop-down List，下拉菜單
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link
rel="stylesheet"
/>
</head>
<body>
<form action="">
<!-- selected為默認選項 -->
<!-- select標(biāo)簽還可以添加multiple隘截，表示可以多選 -->
<select name="" id="">
<option value="">Select a cource</option>
<option value="1" selected>HTML</option>
<option value="2">CSS</option>
<option value="3">JavaScript</option>
</select>
</form>
<form action="">
<!-- selected為默認選項 -->
<!-- select標(biāo)簽還可以添加multiple扎阶，表示可以多選 -->
<select name="" id="">
<optgroup label="Courses">
<option value="1" selected>HTML</option>
<option value="2">CSS</option>
<option value="3">JavaScript</option>
</optgroup>
<optgroup label="Languages">
<option value="4">Java</option>
<option value="5">Go</option>
<option value="7">C++</option>
</optgroup>
</select>
</form>
</body>
</html>
· 復(fù)選框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="">
<div>
<!-- checked 是默認選項 -->
<!-- 也有disabled，禁用選項婶芭，禁止選擇某些checkbox -->
<input type="checkbox" name="" id="front-end" checked>
<!-- label-inline 是CSS框架的類东臀，具體參考CSS框架文檔 -->
<label class="label-inline" for="front-end">Front-end</label>
</div>
<div>
<input type="checkbox" name="" id="back-end">
<!-- label-inline 是CSS框架的類，具體參考CSS框架文檔 -->
<label class="label-inline" for="back-end">Back-end</label>
</div>
</form>
</body>
</html>
· 單選框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link
rel="stylesheet"
/>
</head>
<body>
<form action="">
<div>
<!-- 同樣有checked和disabled參數(shù) -->
<input type="radio" name="membership" id="silver">
<lablel for="silver" class="label-inline">Silver</lablel>
</div>
<div>
<input type="radio" name="membership" id="gold">
<lablel for="gold" class="label-inline">Gold</lablel>
</div>
</form>
</body>
</html>
· 滑動條
因為涉及到JavaScript犀农，Mosh交給我們自己去學(xué)習(xí)-_-#
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link
rel="stylesheet"
/>
</head>
<body>
<form action="">
<input type="range" name="" id="" min="0" max="100" value="90">
</form>
</body>
</html>
· 文件域(就是選擇文件上傳)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link
rel="stylesheet"
/>
</head>
<body>
<form action="">
<!-- mutiple 參數(shù)為是否可以多選 -->
<!-- accept 限制可選文件類型具體類型可以搜一搜 -->
<input type="file" name="" id="" accept=".jpg, .png">
</form>
</body>
</html>
· 將關(guān)聯(lián)輸入域分組
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link
rel="stylesheet"
/>
</head>
<body>
<form action="">
<!-- 一個fieldset就是一個分組 -->
<!-- legend 就是分組標(biāo)題啡邑，也可以用 section和h標(biāo)簽組合來表示分組及分組的標(biāo)題 -->
<fieldset>
<legend>Billing Address</legend>
<input type="text" />
<input type="text" />
<input type="text" />
</fieldset>
<fieldset>
<legend>Payments</legend>
<input type="text" />
<input type="text" />
<input type="text" />
</fieldset>
</form>
</body>
</html>
· 隱藏域
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link
rel="stylesheet"
/>
</head>
<body>
<form action="">
<!-- 這一個input并不會顯示出來，但在提交表單的時候井赌，會把這個input標(biāo)簽的內(nèi)容一并提交 -->
<!-- 切記別放敏感信息谤逼，用戶雖然看不到贵扰，但查看頁面源碼的時候，可以看到 -->
<input type="hidden" name="course-id" value="121">
</form>
</body>
</html>
· 數(shù)據(jù)校驗
表單必備選項
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link
rel="stylesheet"
/>
</head>
<body>
<form action="">
<!-- required表示該項必填 數(shù)據(jù)驗證必須要有-->
<input type="text" required minlength="3" maxlength="10">
<input type="email" required minlength="3" maxlength="10">
<input type="date" required minlength="3" maxlength="10">
<input type="number" required min="0" max="20">
<button type="submit">SUBMIT</button>
</form>
</body>
</html>
· 提交表單
可以使用表單提交測試網(wǎng)站創(chuàng)建自己的表單提交地址(action)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link
rel="stylesheet"
/>
</head>
<body>
<!-- action是提交表單時的URL流部，method是使用哪種http提交方式 -->
<form action="" method="post">
<!-- input標(biāo)簽中的name就是提交表單內(nèi)容的key戚绕，對應(yīng)這個input標(biāo)簽的內(nèi)容 -->
<!-- 查看一下formspree中你創(chuàng)建的表單提交內(nèi)容就能明白了 -->
<input type="text" placeholder="Name" name="Name">
<input type="email" name="Email" id="" placeholder="email">
<button type="submit">SUBMIT</button>
</form>
</body>
</html>
