VietNetwork.Vn

Bản trình diễn này hiển thị một biểu mẫu HTML5 đơn giản với CSS3 Markup. Nó sử dụng các loại và thuộc tính đầu vào HTML5 như xác thực và giữ chỗ phía trình duyệt.

1. Nhìn vào trong.


Gần đây tôi nhận thấy rằng bạn bè của tôi đang tiếp tục thảo luận về Biểu mẫu HTML5 . Có vẻ như HTML5 Form đã trở thành một chủ đề phổ biến giữa các nhà phát triển web và nhà thiết kế web. HTML5 đã giới thiệu một số loại đầu vào mới, thuộc tính biểu mẫu mới và các tính năng biểu mẫu tuyệt vời khác. Xác thực biểu mẫu phía trình duyệt gốc, một trong những tính năng nổi tiếng của biểu mẫu HTML5. Tuy nhiên, vẫn còn nhiều tính năng hình thức tuyệt vời ngoài kia.

Trong bản demo này, tôi đã tạo một biểu mẫu HTML5 đơn giản bằng cách sử dụng các kiểu nhập liệu cũ và mới khác nhau và định kiểu nó bằng CSS3. Bạn có thể kiểm tra kết quả tại bản demo ở trên.

2. Đánh dấu HTML.

Đánh dấu HTML cho Biểu mẫu HTML5 khá đơn giản và giống như bình thường. Nhưng với HTML5, bạn có một số tùy chọn mới cho các loại đầu vào như email, url, phạm vi, v.v. Vì đây là bản demo Mẫu HTML5, vì vậy tôi sẽ cố gắng sử dụng càng nhiều loại đầu vào HTML5 mới càng tốt.

Dưới đây là danh sách các loại đầu vào sẽ được sử dụng trong việc tạo biểu mẫu HTML5.

<input type="text" />
<input type="password" />
<input type="email" />
<input type="url" />
<input type="number" />
<input type="range" />
<textarea></textarea>
<input type="checkbox" />
<input type="submit" />

Bây giờ, chúng tôi sẽ sử dụng các loại đầu vào này và chuyển đổi nó thành biểu mẫu đăng ký với ràng buộc nhãn cho từng loại đầu vào.

<form>
    <fieldset id="account"><legend>Account Details</legend>
        <label for="username">Username:</label>
        <input id="username" type="text" name="username" />

        <label for="password1">Password:</label>
        <input id="password1" type="password" name="password1" />

        <label for="password2">Re-type Password:</label>
        <input id="password2" type="password" name="password2" />

        <label for="email">Email:</label>
        <input id="email" type="email" name="email" />
    </fieldset>
    <fieldset id="personal">
        <legend>Personal Details</legend>

        <label for="website">Website:</label>
        <input id="website" type="url" name="website" />

        <label for="age">Age:</label>
        <input id="age" type="number" name="age" />

        <label for="salary">Monthly Salary:</label>
        <input id="salary" type="range" name="salary" />

        <label for="description">Description:</label>
        <textarea id="description" name="description"></textarea>
    </fieldset>

    <fieldset id="confirm">
        <input id="tnc" type="checkbox" name="tnc" />
        <label for="tnc">I agree to the Terms and Conditions and Privacy Policy.</label>
        <input type="submit" value="Submit" />
    </fieldset>
</form>


Như bạn có thể thấy, tôi đã phân loại các trường biểu mẫu thành ba nhóm, đó là 'Chi tiết tài khoản', 'Chi tiết cá nhân' và 'Xác nhận' bằng cách sử dụng phần tử HTML5 <fieldset> và <legend> để làm cho nó trông gọn gàng hơn.

3. Xác thực mẫu HTML5.

Bây giờ đến phần thú vị, chúng tôi sẽ cải thiện hình thức này bằng cách thêm một số thuộc tính xác thực phía trình duyệt HTML5 như require và pattern . Các thuộc tính này sẽ cung cấp cơ chế xác thực tự động cho trường đầu vào mà không cần sử dụng JavaScript. Thuộc tính Required sẽ đảm bảo trường đầu vào không trống trước khi biểu mẫu được gửi và thuộc tính pattern sẽ xác thực định dạng đầu vào để khớp với biểu thức chính quy định. Một thuộc tính thú vị khác của HTML5 là thuộc tính placeholder . Với thuộc tính placeholder , bạn có thể chỉ định một gợi ý ngắn mô tả giá trị dự kiến ​​của trường đầu vào. Dưới đây là đánh dấu HTML sau khi nâng cao.

<form>
    <fieldset id="account">
        <legend>Account Details</legend>

        <label for="username">Username:</label>
        <input id="username" class="textbox" type="text" name="username" />

        <label for="password1">Password:</label>
        <input id="password1" class="textbox" type="password" name="password1" />

        <label for="password2">Re-type Password:</label>
        <input id="password2" class="textbox" type="password" name="password2" />

        <label for="email">Email:</label>
        <input id="email" class="textbox" type="email" name="email" />
    </fieldset>

    <fieldset id="personal">
        <legend>Personal Details</legend>

        <label for="website">Website:</label>
        <input id="website" class="textbox" type="url" name="website" />

        <label for="age">Age:</label>
        <input id="age" class="textbox" type="number" name="age" />

        <label for="salary">Monthly Salary:</label>
        <input id="salary" class="textbox" type="range" name="salary" value="10000" />

        <label for="description">Description:</label>
        <textarea id="description" name="description" rows="5" cols="30"></textarea>
    </fieldset>

    <fieldset id="confirm">
        <input id="tnc" type="checkbox" name="tnc" />
        <label for="tnc">I agree to the Terms and Conditions and Privacy Policy.</label>
        <input type="submit" value="Submit" />
    </fieldset>
</form>


Để có xác thực phức tạp hơn như xác thực khớp mật khẩu, chúng tôi cần một số trợ giúp từ JavaScript.

<label for="password1">Password:</label>
<input id="password1" class="textbox" type="password" name="password1" />

<label for="password2">Re-type Password:</label>
<input id="password2" class="textbox" type="password" name="password2" />

<script type="text/javascript">
function checkPasswords() {
    var password1 = document.getElementById('password1');
    var password2 = document.getElementById('password2');

    if (password1.value != password2.value) {
        password2.setCustomValidity('Passwords not match');
    } else {
        password2.setCustomValidity('');
    }
}
</script>

Nhân tiện, để làm cho trường thanh trượt trông hoàn hảo, chúng tôi sẽ hiển thị giá trị hiện tại của thanh trượt. Do đó, chúng ta phải sử dụng JavaScript một lần nữa để đạt được điều này.

<label for="salary">Monthly Salary:</label>
<input id="salary" class="textbox" type="range" name="salary" value="10000" onchange="showValue(this.value)" />
<span id="rangevalue">10000</span>

<script type="text/javascript">
    function showValue(value) {
        document.getElementById("rangevalue").innerHTML=value;
    }
</script>

4. Kiểu dáng CSS3.

Bây giờ là thời gian để phong cách các hình thức. Chúng tôi sẽ sử dụng các chuyển đổi và chuyển đổi CSS3 để tạo kiểu cho mẫu HTML5 này. Nếu trình duyệt của bạn không hỗ trợ CSS3, thì bạn sẽ bỏ lỡ cơ hội để thấy sự kỳ diệu của CSS3.

label, input, textarea, fieldset {
    display:block;
}
fieldset#account, fieldset#personal {
    width:250px;
    padding:0 50px 50px;
    margin:10px;
    float:left;
    background:rgb(244,244,244);
    background:rgba(244,244,244,0.7);
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
        border-radius: 25px;
    border:3px double #999;
}
fieldset#confirm {
    padding-top:10px;
    clear:both;
    border:none;
    line-height:15px;
    margin:10px 0;
}
fieldset#confirm label, fieldset#confirm input {
    display:inline;
    float:left;
    margin:15px 5px 0;
}
legend{
    font-size:20px;
    font-weight:bold;
    letter-spacing:5px;
    color:#999;
    margin-left:-20px;
    text-align:left;
    padding:0 10px;
    text-shadow:1px 1px 0 #ccc;
}
label {
    font-size:17px;
    font-weight:bold;
    margin:17px 0 7px;
    text-align:left;
    text-shadow:1px 1px 0 #fff;
}
input.textbox, textarea {
    padding:5px 10px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    border:1px solid #fff;
    width:200px;
    text-shadow:1px 1px 1px #777;
    -moz-box-shadow: 0px 2px 0px #999;
    -webkit-box-shadow: 0px 2px 0px #999;
    box-shadow: 0px 2px 0px #999;

    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;

    background:#F0F0EF; /* fallback */
    background:-webkit-gradient(linear, left top, left bottom, from(#E3E3E3), to(#FFFFFF));
    background:-webkit-linear-gradient(top, #E3E3E3, #FFFFFF);
    background:-moz-linear-gradient(top, #E3E3E3, #FFFFFF);
    background:-ms-linear-gradient(top, #E3E3E3, #FFFFFF);
    background:-o-linear-gradient(top, #E3E3E3, #FFFFFF);
}
textarea {
    resize:both;
    max-width:230px;
}
input.textbox:focus, textarea:focus {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    transform: scale(1.1);
    -moz-box-shadow: 5px 3px 1px #ccc;
    -webkit-box-shadow: 5px 3px 1px #ccc;
    box-shadow: 7px 7px 2px #ccc;
    text-shadow:1px 1px 3px #777;
}
input[type=submit] {
    padding:10px;
    margin:0 10px !important;
    width:300px;
}
#rangevalue {
    display:block;
    text-align:right;
    margin-top:-25px;
}

/* style placeholder */
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
    color: #aaa;
    font-style:italic;
    text-shadow:1px 1px 0 #fff;
}
input:-moz-placeholder, textarea:-moz-placeholder {
    color: #aaa;
    font-style:italic;
    text-shadow:1px 1px 0 #fff;
}

Đối với thông tin của bạn, bạn có thể phân biệt các trường yêu cầu và trường nhập tùy chọn cũng như trường nhập không hợp lệ và trường nhập hợp lệ bằng cách sử dụng các lớp giả CSS mới - :required , :optional , :valid , :invalid .

input:required {
    background:url(required.png) no-repeat 200px 5px #F0F0EF; /* fallback */
    background:url(required.png) no-repeat 200px 5px, -webkit-gradient(linear, left top, left bottom, from(#E3E3E3), to(#FFFFFF));
    background:url(required.png) no-repeat 200px 5px, -webkit-linear-gradient(top, #E3E3E3, #FFFFFF);
    background:url(required.png) no-repeat 200px 5px, -moz-linear-gradient(top, #E3E3E3, #FFFFFF);
    background:url(required.png) no-repeat 200px 5px, -ms-linear-gradient(top, #E3E3E3, #FFFFFF);
    background:url(required.png) no-repeat 200px 5px, -o-linear-gradient(top, #E3E3E3, #FFFFFF);
}
input:valid {
    background:url(valid.png) no-repeat 200px 5px #F0F0EF; /* fallback */
    background:url(valid.png) no-repeat 200px 5px, -webkit-gradient(linear, left top, left bottom, from(#E3E3E3), to(#FFFFFF));
    background:url(valid.png) no-repeat 200px 5px, -webkit-linear-gradient(top, #E3E3E3, #FFFFFF);
    background:url(valid.png) no-repeat 200px 5px, -moz-linear-gradient(top, #E3E3E3, #FFFFFF);
    background:url(valid.png) no-repeat 200px 5px, -ms-linear-gradient(top, #E3E3E3, #FFFFFF);
    background:url(valid.png) no-repeat 200px 5px, -o-linear-gradient(top, #E3E3E3, #FFFFFF);
}
input:focus:invalid {
    background:url(invalid.png) no-repeat 200px 5px #F0F0EF; /* fallback */
    background:url(invalid.png) no-repeat 200px 5px, -webkit-gradient(linear, left top, left bottom, from(#E3E3E3), to(#FFFFFF));
    background:url(invalid.png) no-repeat 200px 5px, -webkit-linear-gradient(top, #E3E3E3, #FFFFFF);
    background:url(invalid.png) no-repeat 200px 5px, -moz-linear-gradient(top, #E3E3E3, #FFFFFF);
    background:url(invalid.png) no-repeat 200px 5px, -ms-linear-gradient(top, #E3E3E3, #FFFFFF);
    background:url(invalid.png) no-repeat 200px 5px, -o-linear-gradient(top, #E3E3E3, #FFFFFF);
}

5. Sửa đổi cuối cùng.

Như chúng ta đã biết, không phải tất cả các trình duyệt đều hỗ trợ xác thực mẫu HTML5, một số và một số hoàn toàn không. Dưới đây, chúng tôi phải thực hiện một số điều chỉnh liên quan đến việc này. Trong trường hợp này, tôi sẽ chỉ đơn giản hiển thị một thông báo cho các trình duyệt khác nhau.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    if($.browser.msie) {
        $('#lbl').text('Oops! Look like your browser doesn\'t support HTML5 Form. Try Using Chrome or Safari.');
    }
    else if($.browser.mozilla) {
        $('#lbl').text('Oops! Your browser is not fully support HTML5 Form. Try Using Chrome or Safari.');
    }
    else{
        $('#lbl').text('Yeah... Your browser support HTML5 Form!');
    }
});
</script>

Biểu mẫu HTML5 này không hoạt động trong Internet Explorer. Tuy nhiên, Firefox hỗ trợ xác thực mẫu HTML5 nhưng không hỗ trợ các loại đầu vào HTML5 mới như số lượng và phạm vi. Nhân tiện, hình thức HTML5 này sẽ hoạt động tốt trong Chrome và Safari. Do đó, bạn nên xem Biểu mẫu HTML5 này bằng Chrome hoặc Safari để có kết quả tốt hơn.