Đầu vào W3.CSS
Mẫu đầu vào
Nhãn hàng đầu
Mẫu đầu vào
Thí 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>
Nhãn dưới cùng
Mẫu đầu vào
Thí 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>
Thẻ đầu vào
Tiêu đề
Thí 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>
Nhãn màu
Sử dụng bất kỳ lớp màu văn bản w3 nào để tô màu cho nhãn của bạn:
Thí 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>
Đầu vào có viền
Thêm lớp w3-border để tạo các đầu vào có viền:
Thí dụ
<input class="w3-input w3-border"
type="text">
Viền tròn
Sử dụng bất kỳ lớp w3-round nào để tạo đường viền tròn:
Thí dụ
<input class="w3-input w3-border w3-round"
type="text">
<input class="w3-input w3-border
w3-round-large"
type="text">
Đầu vào không viền
Theo mặc định, lớp w3-input có đường viền dưới cùng. Nếu bạn muốn một đầu vào không viền, hãy thêm lớp w3-border-0 :
Thí 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>
Màu sắc
Hãy thoải mái sử dụng các kiểu dáng và màu sắc yêu thích của bạn:
Mẫu đầu vào
Thí 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>
Đầu vào đáng tin cậy
Các lớp w3-hover- color thêm màu nền vào trường nhập liệu khi di chuột qua:
Thí 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">
Đầu vào hoạt hình
Lớp w3-animate-input chuyển đổi chiều rộng của trường đầu vào thành 100% khi nó được lấy nét:
Thí dụ
<input class="w3-input w3-animate-input"
type="text" style="width:30%">
Thí 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>
Thí 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>
Lựa chọn các phương án
Thí 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>
Menu chọn có viền
Thí dụ
<select class="w3-select w3-border" name="option">
Phần tử biểu mẫu trong 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.
Thí 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>
Grid with Labels
Thí 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>