Pure.CSS - Biểu mẫu
Pure.CSS có một CSS rất đẹp và đáp ứng cho các thiết kế biểu mẫu. CSS sau được sử dụng:
| Sr.No. | Tên & Mô tả Lớp học |
|---|---|
| 1 | pure-form Đại diện cho một dạng nội tuyến nhỏ gọn. |
| 2 | pure-form-stacked Biểu diễn một biểu mẫu xếp chồng với các phần tử đầu vào bên dưới nhãn. Được sử dụng với dạng nguyên chất. |
| 3 | pure-form-aligned Đại diện cho một biểu mẫu được căn chỉnh với các phần tử đầu vào bên dưới nhãn. Được sử dụng với dạng nguyên chất. |
| 4 | pure-input-rounded Hiển thị một điều khiển biểu mẫu với các góc tròn |
| 5 | pure-button Làm đẹp một nút. |
| 6 | pure-checkbox Làm đẹp một hộp kiểm. |
| 7 | pure-radio Làm đẹp một đài phát thanh. |
Thí dụ
purecss_forms.htm
<html>
<head>
<title>The PURE.CSS Forms</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet" href = "https://yui.yahooapis.com/pure/0.6.0/pure-min.css">
</head>
<body>
<form class = "pure-form pure-form-aligned">
<fieldset>
<div class = "pure-control-group">
<label for = "name">Username</label>
<input id = "name" type = "text" placeholder = "Username" required>
</div>
<div class = "pure-control-group">
<label for = "email">Email</label>
<input id = "email" type = "text" placeholder = "Email Address" required>
</div>
<div class = "pure-control-group">
<label for = "comments">Comments</label>
<input id = "comments" type="text" placeholder = "Comments">
</div>
<div class = "pure-controls">
<label for = "married" class = "pure-checkbox">
<input id = "married" type = "checkbox" checked = "checked">
Married
</label>
<br>
<label for = "single" class = "pure-checkbox">
<input id = "single" type = "checkbox">
Single
</label>
<br>
<label for = "dontknow" class = "pure-checkbox">
<input id = "dontknow" type = "checkbox" disabled>
Don't know (Disabled)
</label>
<br>
<br>
</div>
<div class = "pure-controls">
<label for = "male" class = "pure-radio">
<input id = "male" type = "radio" name = "gender" value = "male" checked>
Male
</label>
<br>
<label for = "female" class= "pure-radio">
<input id = "female" type = "radio" name = "gender" value = "female">
Female
</label>
<br>
<label for = "dontknow1" class = "pure-radio">
<input id = "dontknow1" type = "radio" name = "gender" value = "female" disabled>
Don't know (Disabled)
</label>
<button type = "submit" class = "pure-button pure-button-primary">Submit</button>
</div>
</fieldset>
</form>
</body>
</html>Kết quả
Xác minh kết quả.