logo

Thông báo

Icon
Error

Chia sẻ
Tùy chọn
Xem
Xem bài viết cuối
Offline Ellry  
#1 Đã gửi : 29/03/2017 lúc 11:51:37(UTC)
Ellry


Danh hiệu: Advanced Member

Chức danh:

Nhóm: Moderator
Gia nhập: 05-10-2015(UTC)
Bài viết: 7,494
Woman
Viet Nam
Đến từ: Tp. Hồ Chí Minh

Được cảm ơn: 21 lần trong 17 bài viết

Validate Form chỉ bằng HTML và CSS với pattern RegEx

HTML : 

Mã:
<h3><span>HTML</span> & <span> CSS</span> form validation using pattern RegEx</h3>
<form>
    <label>No Spaces , No Special Characters <span><strong>Pattern</strong> - [A-Za-z0-9]{5,50}</span></label>
    <input autocomplete="off" type="text" pattern="[A-Za-z0-9]{5,50}" required="" />
    <label>Twiter User (@username) <span><strong>Pattern</strong> - @[A-Za-z0-9_{5,50}$</span></label>
    <input autocomplete="off" type="text" pattern="@[A-Za-z0-9]{5,50}" required="" />
    <label>Tag (#tag) <span><strong>Pattern</strong> - #[A-Za-z0-9_{3,15}</span></label>
    <input autocomplete="off" type="text" pattern="#[A-Za-z0-9]{3,15}" required="" />
</form>
<form>
    <label>Domain Name (http://www.name.ext) <span><strong>Pattern</strong> - http://www\.[A-Za-z0-9]{3,50}\.[-A-Za-z0-9]{2,3}</span></label>
    <input autocomplete="off" type="text" pattern="http://www\.[A-Za-z0-9]{3,50}\.[-A-Za-z0-9]{2,3}" required="" />
    <label>Only Gmail (name@gmail.com) <span><strong>Pattern</strong> - [A-Za-z0-9]{1,50}\@gmail\.com</span></label>
    <input autocomplete="off" type="text" pattern="[A-Za-z0-9]{1,50}\@gmail\.com" required="" />
    <label>Card Number (0000-0000-0000-0000) <span><strong>Pattern</strong> - ([0-9]{4}\-){3}[0-9]{4}</span></label>
    <input autocomplete="off" type="text" pattern="([0-9]{4}\-){3}[0-9]{4}" required="" />
</form>
<div>
    By <a href="https://twitter.com/JesGraPa" target="_blank">@JesGraPa</a> - 
    <a href="http://codepen.io/JesGraPa/" target="_blank">More Pens</a>
    <br><br>
</div>

CSS:

Mã:
/*General styles*/
*{margin:0; padding:0; font-family: "Open Sans"; outline: none; text-decoration: none; box-sizing:border-box;}
html,body{ background: #949FAA;}
h3{ text-align: center; margin-top: 50px; font-size: 30px; color: #666;}
h3 span{ color: #333; letter-spacing: -2px; font-size: 35px;}
div{ text-align: center; color:#666; clear:both; margin-bottom: 50px;}
div a{ color:#333;}
div a:hover{ color:#000;}
form{ padding: 50px; width: 50%;margin: 0 auto; float: left;}
label{ margin-top: 10px; display: block; font-size: 18px; color: #333;}
label span{ display: block; font-size: 13px; color:#666;}

/*General Input*/ input{width: 100%; background: #A1ABB5; transition:all 0.3s; display: inline-block; padding: 0 10px; border-radius: 5px;    border: 1px solid #888; color: #666; font-size: 25px; margin: 10px 0; line-height: 45px;}

/*Calidation styles*/ /*Only on focus*/ input:focus{ color: #222; background: #97ABBE; border-color:#999;} /*Only on valid*/ input:valid{box-shadow: 0 0 2px rgba(0,255,0,0.4);} /*Only on focus and valid*/ input:valid:focus{ background: #80BE93; box-shadow: none;  } /*Only on invalid*/ input:invalid{box-shadow: 0 0 2px rgba(255,0,0,0.4);} /*Only on focus and invalid*/ input:invalid:focus{ background: #CB9089; box-shadow: none;}

Ai đang xem chủ đề này?
OceanSpiders 2.0
Di chuyển  
Bạn không thể tạo chủ đề mới trong diễn đàn này.
Bạn không thể trả lời chủ đề trong diễn đàn này.
Bạn không thể xóa bài của bạn trong diễn đàn này.
Bạn không thể sửa bài của bạn trong diễn đàn này.
Bạn không thể tạo bình chọn trong diễn đàn này.
Bạn không thể bỏ phiếu bình chọn trong diễn đàn này.

| Cung cấp bởi YAF.NET 2.2.4.14 | YAF.NET © 2003-2021, Yet Another Forum.NET
Thời gian xử lý trang này hết 0.188 giây.