華麗的CSS3+HTML5表單客戶端驗證

阿新 • • 發佈：2018-12-31

最近學習CSS3，看到一個很好的表單驗證，和大家一起仿作一下。

本資源已上傳的我的CSDN

預覽效果：

1.首先從DREAMWEAVER 上把W3C標準的HTML空檔案拿過來

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>表單客戶端驗證（CSS3+HTML5）</title>
<link rel="stylesheet" media="screen" href="styles.css" rel="external nofollow"  >
</head>
<body>
</body>
</html>

2.建立表單

<form class="contact_form" action="" method="post" name="contact_form">
</form>

3.輸入表頭和第一個單選框

<ul>
    <li>
         <h2>聯絡我們</h2>
         <span class="required_notification">* 表示必填項</span>
    </li>
    <li>
        <label for="name">姓名:</label>
        <input type="text" name="name" />
    </li>
</ul>

4.表單提示

<li>
    <label for="email">電子郵件:</label>
    <input type="text" name="email" />
    <span class="form_hint">正確格式為：[email protected]</span>
</li>

5.繼續其他輸入元素

<li>
    <label for="website">網站:</label>
    <input type="text" name="website" />
    <span class="form_hint">正確格式為：http://blog.csdn.net</span>
</li>
<li>
    <label for="message">留言:</label>

    <textarea name="message" cols="40" rows="6" ></textarea>
</li>
<li>
    <button class="submit" type="submit">提交</button>
</li>

預覽一下~

6.新增佔位符

作為HTML5的改進之一的網頁表單可以設定placeholder佔位符屬性.佔位符欄位會在輸入區域為空時或者不處於焦點時顯示的，在以前我們只能用javascript來實現.增加佔位符欄位可以引導使用者正確的輸入資訊.

提示：改placeholder的風格

:-moz-placeholder {
    color: blue;
}
::-webkit-input-placeholder {
    color: blue;
}

7.定義CSS樣式

Webkit核心瀏覽器會自動給新增一些焦點樣式，我們要自定義風格，所以需要把它給去掉預設值.

ie不會自動新增

*:focus {outline: none;}

新增字型以及字型大小樣式.

body {font: 14px/21px "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", sans-serif;}
.contact_form h2, .contact_form label {font-family:Georgia, Times, "Times New Roman", serif;}
.form_hint, .required_notification {font-size: 11px;}

列表樣式

.contact_form ul {
    width:750px;
    list-style-type:none;
    list-style-position:outside;
    margin:0px;
    padding:0px;
}
.contact_form li{
    padding:12px;
    border-bottom:1px solid #eee;
    position:relative;
}

底部邊框

.contact_form li:first-child, .contact_form li:last-child {
    border-bottom:1px solid #777;
}

表頭樣式

.contact_form h2 {
    margin:0;
    display: inline;
}
.required_notification {
    color:#d45252;
    margin:5px 0 0 0;
    display:inline;
    float:right;
}

表單輸入樣式

.contact_form label {
    width:150px;
    margin-top: 3px;
    display:inline-block;
    float:left;
    padding:3px;
}
.contact_form input {
    height:20px;
    width:220px;
    padding:5px 8px;
}
.contact_form textarea {padding:8px; width:300px;}
.contact_form button {margin-left:156px;}

額外的美化

.contact_form input, .contact_form textarea {
    border:1px solid #aaa;
    box-shadow: 0px 0px 3px #ccc, 0 10px 15px #eee inset;
    border-radius:2px;
}
.contact_form input:focus, .contact_form textarea:focus {
    background: #fff;
    border:1px solid #555;
    box-shadow: 0 0 3px #aaa;
}
/* Button Style */
button.submit {
    background-color: #68b12f;
    background: -webkit-gradient(linear, left top, left bottom, from(#68b12f), to(#50911e));
    background: -webkit-linear-gradient(top, #68b12f, #50911e);
    background: -moz-linear-gradient(top, #68b12f, #50911e);
    background: -ms-linear-gradient(top, #68b12f, #50911e);
    background: -o-linear-gradient(top, #68b12f, #50911e);
    background: linear-gradient(top, #68b12f, #50911e);
    border: 1px solid #509111;
    border-bottom: 1px solid #5b992b;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    box-shadow: inset 0 1px 0 0 #9fd574;
    -webkit-box-shadow: 0 1px 0 0 #9fd574 inset ;
    -moz-box-shadow: 0 1px 0 0 #9fd574 inset;
    -ms-box-shadow: 0 1px 0 0 #9fd574 inset;
    -o-box-shadow: 0 1px 0 0 #9fd574 inset;
    color: white;
    font-weight: bold;
    padding: 6px 20px;
    text-align: center;
    text-shadow: 0 -1px 0 #396715;
}
button.submit:hover {
    opacity:.85;
    cursor: pointer;
}
button.submit:active {
    border: 1px solid #20911e;
    box-shadow: 0 0 10px 5px #356b0b inset;
    -webkit-box-shadow:0 0 10px 5px #356b0b inset ;
    -moz-box-shadow: 0 0 10px 5px #356b0b inset;
    -ms-box-shadow: 0 0 10px 5px #356b0b inset;
    -o-box-shadow: 0 0 10px 5px #356b0b inset;
}

css互動

.contact_form input:focus, .contact_form textarea:focus { /* add this to the already existing style */
    padding-right:70px;
}

緩慢過度

.contact_form input, .contact_form textarea { /* add this to the already existing style */
    -moz-transition: padding .25s;
    -webkit-transition: padding .25s;
    -o-transition: padding .25s;
    transition: padding .25s;
}

8.表單處理（required）

<input type="text" name="name" required />
<input type="text" name="email" required />
<input type="text" name="website" required />
<textarea name="message" cols="40" rows="6" required ></textarea>

9.required樣式

.contact_form input, .contact_form textarea {
    padding-right:30px;
}

再加個*圖片

input:required, textarea:required {
    background: #fff url(images/red_asterisk.png) no-repeat 98% center;
}

10.更改type屬性

<input type="email" name="email" placeholder="[email protected]" required />
<input type="url" name="website" placeholder="http://blog.csdn.net/" required/>

11.html驗證

正如在前面所說到的，HTML5在預設情況下是通過type來驗證的.這個驗證功能是預設啟用狀態的，如果你要關閉這個功能可以用novalidate屬性來實現：

<form novalidate>
    <-- do not validate this form -->
    <input type="text" />
</form>

如果無效加一個小感嘆號

.contact_form input:focus:invalid, .contact_form textarea:focus:invalid { /* when a field is considered invalid by the browser */
    background: #fff url(images/invalid.png) no-repeat 98% center;
    box-shadow: 0 0 5px #d45252;
    border-color: #b03535
}

正確則一個“勾”

.contact_form input:required:valid, .contact_form textarea:required:valid { /* when a field is considered valid by the browser */
    background: #fff url(images/valid.png) no-repeat 98% center;
    box-shadow: 0 0 5px #5cd053;
    border-color: #28921f;
}

正則表示式

用type="email"屬性來舉例說明，在大部分瀏覽器中驗證的欄位為@(任意字元 + “@” 符號 + 任意字元)。這顯示是有限的，靠它阻止使用者輸入空格或資訊是不能完美解決的。另一個type="url"屬性，在大多數瀏覽器中的驗證欄位的最低限度為“任意字元加一個冒號”。假如，你輸入的是“H：”，然後進行驗證，這將會通過驗證，但很明顯這不是一個網址，所以我們希望可以更加詳細具體的驗證使用者所輸入的資訊，那我們應該在HTML5中怎麼解決使用伺服器驗證來實現上述說到的問題呢？

<input type="url" name="website" placeholder="http://blog.csdn.com" required pattern="(http|https)://.+" />

現在我們的“網站”欄位將只會接受http://或者https://開頭的字元了。這個正則表示式模式有時候的確讓人難以捉摸，但如果你有時間去學習它，那麼你們將會開闊另一片天地。

表單提示語

.form_hint {
    background: #d45252;
    border-radius: 3px 3px 3px 3px;
    color: white;
    margin-left:8px;
    padding: 1px 6px;
    z-index: 999; /* hints stay above all other elements */
    position: absolute; /* allows proper formatting if hint is two lines */
    display: none;
}

.form_hint::before {
    content: "\25C0"; /* left point triangle in escaped unicode */
    color:#d45252;
    position: absolute;
    top:1px;
    left:-6px;
}

相鄰選擇符

.contact_form input:focus + .form_hint {display: inline;}
.contact_form input:required:valid + .form_hint {background: #28921f;} /* change form hint color when valid */
.contact_form input:required:valid + .form_hint::before {color:#28921f;} /* change form hint arrow color when valid */

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
end

華麗的CSS3+HTML5表單客戶端驗證

華麗的CSS3+HTML5表單客戶端驗證

html5表單+jquery非同步驗證

如何在.Net Core MVC中為動態表單開啟客戶端驗證

表單提交的客戶端驗證（通過js函式驗證）

HTML5表單及其驗證

html5表單自動驗證2：必須是字母開頭驗證

html5表單自動驗證1

HTML5+Javascript表單註冊和驗證練習

HTML5 + CSS3 3 表單

html5表單pattern屬性配合正則驗證電話和手機號碼

jQuery html5Validate基於HTML5表單驗證外掛

HTML5 基礎（4）—— HTML5表單新屬性的使用和驗證表單

HTML5表單

html5 表單填表 select 下拉 textarea多行文本 output Js計算結果

js 對表單的一些驗證及正則匹配

表單正則驗證及文件上傳驗證

SpringMVC中文件上傳的客戶端驗證

@Html.ValidationMessageFor客戶端驗證

HTML5 表單提交實例

html5-表單的綜合實例

華麗的CSS3+HTML5表單客戶端驗證

相關推薦