Đầu vào W3.CSS
Mẫu đầu vào
Nhãn hàng đầu
Mẫu đầu vào
Ví dụ
<form class="w3-container">
<label>First Name</label>
<input class="w3-input" type="text">
<label>Last Name</label>
<input class="w3-input" type="text">
</form>
Hãy tự mình thử »Nhãn dưới cùng
Mẫu đầu vào
Ví dụ
<form class="w3-container">
<input class="w3-input" type="text">
<label>First Name</label>
<input class="w3-input" type="text">
<label>Last
Name</label>
</form>
Hãy tự mình thử » Thẻ đầu vào
tiêu đề
Ví dụ
<div class="w3-card-4">
<div class="w3-container
w3-green">
<h2>Header</h2>
</div>
<form class="w3-container">
<label>First Name</label>
<input class="w3-input"
type="text">
<label>Last Name</label>
<input class="w3-input"
type="text">
</form>
</div> Hãy tự mình thử »Nhãn màu
Sử dụng bất kỳ lớp w3-text-color nào để tô màu nhãn của bạn:
Ví dụ
<form class="w3-container">
<label
class="w3-text-blue"><b>First Name</b></label>
<input class="w3-input w3-border" type="text">
<label
class="w3-text-blue"><b>Last Name</b></label>
<input class="w3-input w3-border" type="text">
<button class="w3-btn
w3-blue">Register</button>
</form> Hãy tự mình thử »Đầu vào có viền
Thêm lớp w3-border để tạo đầu vào có viền:
Đường viền tròn
Sử dụng bất kỳ lớp w3-round nào để tạo đường viền tròn:
Ví dụ
<input class="w3-input w3-border w3-round"
type="text">
<input class="w3-input w3-border
w3-round-large"
type="text">Hãy tự mình thử »Đầu vào không viền
Theo mặc định, lớp đầu vào w3 có đường viền dưới cùng. Nếu bạn muốn đầu vào không viền, hãy thêm lớp w3-border-0 :
Ví dụ
<form class="w3-container w3-light-grey">
<label>First
Name</label>
<input class="w3-input w3-border-0" type="text">
<label>Last Name</label>
<input class="w3-input
w3-border-0" type="text">
</form> Hãy tự mình thử »Màu sắc
Hãy thoải mái sử dụng kiểu dáng và màu sắc yêu thích của bạn:
Mẫu đầu vào
Ví dụ
<div class="w3-container w3-teal">
<h2>Input Form</h2>
</div>
<form class="w3-container">
<label class="w3-text-teal"><b>First Name</b></label>
<input class="w3-input w3-border w3-light-grey" type="text">
<label class="w3-text-teal"><b>Last Name</b></label>
<input class="w3-input w3-border w3-light-grey" type="text">
<button class="w3-btn w3-blue-grey">Register</button>
</form> Hãy tự mình thử »Đầu vào có thể di chuột
Các lớp w3-hover- color thêm màu nền vào trường nhập khi di chuột qua:
Ví dụ
<input class="w3-input w3-hover-green" type="text">
<input class="w3-input
w3-border w3-hover-red" type="text">
<input class="w3-input
w3-border w3-hover-blue" type="text">
Hãy tự mình thử »Đầu vào hoạt hình
Lớp w3-animate-input biến đổi độ rộng của trường đầu vào thành 100% khi nó được lấy tiêu điểm:
Ví dụ
<input class="w3-check" type="checkbox" checked="checked">
<label>Milk</label>
<input class="w3-check"
type="checkbox">
<label>Sugar</label>
<input class="w3-check" type="checkbox" disabled>
<label>Lemon (Disabled)</label> Hãy tự mình thử »Ví dụ
<input class="w3-radio" type="radio" name="gender" value="male" checked>
<label>Male</label>
<input class="w3-radio"
type="radio" name="gender" value="female">
<label>Female</label>
<input class="w3-radio"
type="radio" name="gender" value="" disabled>
<label>Don't know (Disabled)</label> Hãy tự mình thử »Lựa chọn các phương án
Ví dụ
<select class="w3-select" name="option">
<option value="" disabled
selected>Choose your option</option>
<option value="1">Option
1</option>
<option value="2">Option 2</option>
<option
value="3">Option 3</option>
</select> Hãy tự mình thử »Menu chọn có viền
Các phần tử biểu mẫu trong một lưới
Trong ví dụ này, chúng tôi sử dụng Hệ thống lưới đáp ứng của W3.CSS để làm cho các đầu vào xuất hiện trên cùng một dòng (trên màn hình nhỏ hơn, chúng sẽ xếp chồng theo chiều ngang với chiều rộng 100%). Bạn sẽ tìm hiểu thêm về điều này sau.
Ví dụ
<div class="w3-row-padding">
<div class="w3-third">
<input class="w3-input w3-border" type="text" placeholder="One">
</div>
<div class="w3-third">
<input
class="w3-input w3-border" type="text" placeholder="Two">
</div>
<div class="w3-third">
<input class="w3-input
w3-border" type="text" placeholder="Three">
</div>
</div> Hãy tự mình thử »Lưới có nhãn
Ví dụ
<div class="w3-row-padding">
<div class="w3-half">
<label>First Name</label>
<input
class="w3-input w3-border" type="text" placeholder="Two">
</div>
<div class="w3-half">
<label>Last
Name</label>
<input class="w3-input
w3-border" type="text" placeholder="Three">
</div>
</div> Hãy tự mình thử »