Đó là năm 2019 và các câu trả lời trước cho vấn đề này không được sử dụng
- Lưới CSS
- Biến CSS
- Các yếu tố hình thức HTML5
- SVG trong CSS
Lưới CSS là cách để thực hiện các biểu mẫu vào năm 2019 vì bạn có thể có các nhãn của mình trước các đầu vào của bạn mà không cần thêm div, spans, spans với dấu hoa thị và các thánh tích khác.
Đây là nơi chúng ta sẽ thực hiện với CSS tối thiểu:
HTML cho ở trên:
<form action="https://www.example.com/register/" method="post" id="form-validate" enctype="multipart/form-data">
<p class="form-instructions">Please enter the following information to create your account.</p>
<label for="firstname">First name</label>
<input type="text" id="firstname" name="firstname" value="" title="First name" maxlength="255" required="">
<label for="lastname">Last name</label>
<input type="text" id="lastname" name="lastname" value="" title="Last name" maxlength="255" required="">
<label for="email_address">Email address</label>
<input type="email" autocapitalize="off" autocorrect="off" spellcheck="false" name="email" id="email_address" value="" title="Email address" size="30" required="">
<label for="password">Password</label>
<input type="password" name="password" id="password" title="Password" required="">
<label for="confirmation">Confirm password</label>
<input type="password" name="confirmation" title="Confirm password" id="confirmation" required="">
<input type="checkbox" name="is_subscribed" title="Subscribe to our newsletter" value="1" id="is_subscribed" class="checkbox">
<label for="is_subscribed">Subscribe to the newsletter</label>
<input type="checkbox" name="persistent_remember_me" id="remember_meGCJiRe0GbJ" checked="checked" title="Remember me">
<label for="remember_meGCJiRe0GbJ">Remember me</label>
<p class="required">* Required</p>
<button type="submit" title="Register">Register</button>
</form>
Văn bản giữ chỗ cũng có thể được thêm vào và rất khuyến khích. (Tôi chỉ trả lời mẫu giữa này).
Bây giờ cho các biến CSS:
--icon-required: url('data:image/svg+xml,\
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="-10 -6 16 16"> \
<line id="line" y1="-3" y2="3" stroke="%23df0000" stroke-linecap="butt" transform="rotate(15)"></line> \
<line id="line" y1="-3" y2="3" stroke="%23df0000" stroke-linecap="butt" transform="rotate(75)"></line> \
<line id="line" y1="-3" y2="3" stroke="%23df0000" stroke-linecap="butt" transform="rotate(-45)"></line> \
</svg>');
--icon-tick: url('data:image/svg+xml,\
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100" height="100" viewBox="-2 -2 16 16"> \
<path fill="green" stroke-linejoin="round" d="M2 6L1 7l3 4 7-10h-1L4 8z"/> \
</svg>');
CSS cho các thành phần của biểu mẫu:
input[type=text][required],
input[type=email][required],
input[type=password][required],
input[type=tel][required] {
background-image: var(--icon-required);
background-position-x: right;
background-repeat: no-repeat;
background-size: contain;
}
input:valid {
--icon-required: var(--icon-tick);
}
Bản thân biểu mẫu phải ở dạng lưới CSS:
form {
align-items: center;
display: grid;
grid-gap: var(--form-grid-gap);
grid-template-columns: var(--form-grid-template-columns);
margin: auto;
}
Các giá trị cho các cột có thể được đặt thành 1fr autohoặc 1frvới bất kỳ thứ gì như<p> các thẻ trong biểu mẫu được đặt thành nhịp 1 / -1. Bạn thay đổi các biến trong các truy vấn phương tiện để bạn có các hộp đầu vào có chiều rộng đầy đủ trên thiết bị di động và như trên trên máy tính để bàn. Bạn cũng có thể thay đổi khoảng cách lưới của mình trên thiết bị di động nếu bạn muốn bằng cách sử dụng phương pháp biến CSS.
Khi các hộp hợp lệ thì bạn nên đánh dấu màu xanh lá cây thay vì dấu hoa thị.
SVG trong CSS là một cách để tiết kiệm trình duyệt khỏi phải thực hiện một chuyến đi khứ hồi đến máy chủ để có được hình ảnh của dấu hoa thị. Theo cách này, bạn có thể tinh chỉnh các dấu sao, các ví dụ ở đây là ở một góc độ khác thường, bạn có thể chỉnh sửa điều này vì biểu tượng SVG ở trên hoàn toàn có thể đọc được. Hộp ngắm cũng có thể được sửa đổi để đặt dấu hoa thị phía trên hoặc bên dưới trung tâm.
