講解下佔位符placeholder的用法，大家在做前端開發的時候有時候會用到form表單，這是最常用的提交到後臺的數據，進行處理，但是爲了非法輸入一些不良的信息，我們不得不在前端表單裏面進行驗證，所以我們使用css進行驗證。
如果瀏覽不順暢請到原文章出處：https://www.sky8g.com/technology/3225/
請注意可能會提示風險，這是CSDN網站設置的問題，如果文章內的鏈接不是他們的網址,都會對用戶提示有風險,請點擊繼續訪問,本網站全部文章爲免費技術分享,請放心訪問,無需擔心。
請點擊此處查看完整文章：https://www.sky8g.com/technology/3225/
此篇文章是由SKY8G網作者原創，禁止抄襲。
使用lable標籤看起來像一個placeholder佔位符
首先我們使用：<label for="correct_input"> 這個元素，這一點是爲用戶體驗的考慮。佔位符是有效輸入的建議，比如將“Tulsa”放在標有“City”的佔位符放在input輸入中即使placeholder。
我想說的是，如果表單很短，並且有明顯的模式(比如註冊或登錄)，您可以使用佔位符可視模式，但是要使用實際的標籤。
例如下面的這個表單HTML代碼
|
1 2 3 4 5 6 7 8 9 10 |
<form action="#0" method="post">
<div> <input type="text" id="first_name" name="first_name"> <label for="first_name">First Name</label> </div>
<!-- ... --->
</form> |
您可以使用div作爲定位上下文，並將標籤直接放在表單上。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
form { max-width: 450px;
// positioning context > div { position: relative;
// Looks like placeholder > label { opacity: 0.3; position: absolute; top: 22px; left: 20px; } } } |
您不需要做任何複雜的光標操作，因爲它已經在語義上連接好了。如果他們單擊標籤佔用的區域，它將激活輸入。如果他們點擊輸入，它將激活輸入都正確。
標籤隱藏在焦點上:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
form {
/* ... */
> div { > input[type="text"], > input[type="email"], > input[type="password"] {
&:focus { & + label { opacity: 0; } }
} } } |
製作input必須填寫
您可以對錶單進行的最簡單的驗證可能是使用required屬性來要求字段。如果這樣的話，沒有比讓瀏覽器來捕捉錯誤更快的方法了!
|
1 |
<input required type="text" id="first_name" name="first_name"> |
input有效的驗證
讓用戶知道一個字段已經正確輸入。瀏覽器可以通過:valid CSS selector:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
form {
> input[type="text"], > input[type="email"], > input[type="password"] {
// show success! &:valid { background: url(images/check.svg); background-size: 20px; background-repeat: no-repeat; background-position: 20px 20px;
// continue to hide the label & + label { opacity: 0; } } } } } |
顯示關於類型驗證的提醒
您還可以要求輸入的值是某種類型的，比如email或number。下面是所有的例子。
|
1 |
<input type="email" id="email" name="email" required> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
form {
> div {
> input[type="text"], > input[type="email"], > input[type="password"] {
// When input is... // 1. NOT empty // 2. NOT in focus // 3. NOT valid &:invalid:not(:focus):not(:placeholder-shown) { // Show a light reminder background: pink; & + label { opacity: 0; } }
// When that invalid input becomes in focus (and also still isn't empty) &:invalid:focus:not(:placeholder-shown) { // Show the more robust requirement instructions below. & ~ .requirements { max-height: 200px; padding: 0 30px 20px 50px; } }
}
// <input> ~ // <label> ~ // <div class="requirements"> .requirements { padding: 0 30px 0 50px; color: #999; max-height: 0; transition: 0.28s; overflow: hidden; color: red; font-style: italic; }
} } |
完整的demo 如下圖
html代碼如下
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<form action="#0">
<div> <input type="text" id="first_name" name="first_name" required placeholder=" " /> <label for="first_name">First Name</label> </div>
<div> <input type="text" id="last_name" name="last_name" required placeholder=" " /> <label for="last_name">Last Name</label> </div>
<div> <input type="email" id="email" name="email" required placeholder=" " /> <label for="email">Email Address</label> <div class="requirements"> Must be a valid email address. </div> </div>
<div> <input type="password" id="password" name="password" required placeholder=" " pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}" /> <label for="password">Password</label> <div class="requirements"> Your password must be at least 6 characters as well as contain at least one uppercase, one lowercase, and one number. </div> </div>
<input type="submit" value="Sign Up" />
</form> |
scss代碼如下
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 |
@import url(https://fonts.googleapis.com/css?family=PT+Sans:400,700);
form { max-width: 450px; margin: 0 auto;
// positioning context > div { position: relative; background: white; border-bottom: 1px solid #ccc;
// Looks like placeholder > label { opacity: 0.3; font-weight: bold; position: absolute; top: 22px; left: 20px; }
> input[type="text"], > input[type="email"], > input[type="password"] { width: 100%; border: 0; padding: 20px 20px 20px 50px; background: #eee;
&:focus {
// removing default focus style outline: 0; // adding new one background: white;
& + label { opacity: 0; } }
&:valid { background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/check.svg); background-size: 20px; background-repeat: no-repeat; background-position: 20px 20px; & + label { opacity: 0; } }
&:invalid:not(:focus):not(:placeholder-shown) { background: pink; & + label { opacity: 0; } }
&:invalid:focus:not(:placeholder-shown) { & ~ .requirements { max-height: 200px; padding: 0 30px 20px 50px; } }
}
.requirements { padding: 0 30px 0 50px; color: #999; max-height: 0; transition: 0.28s; overflow: hidden; color: red; font-style: italic; }
}
input[type="submit"] { display: block; width: 100%; margin: 20px 0; background: #41D873; color: white; border: 0; padding: 20px; font-size: 1.2rem; }
}
body { background: #333; font-family: 'PT Sans', sans-serif; padding: 20px; } * { box-sizing: border-box; } |
如果有不懂的地方請留言，SKY8G網站編輯者專注於研究IT源代碼研究與開發。希望你下次光臨，你的認可和留言是對我們最大的支持，謝謝！