----
2.8.4 Kĩ thuật định dạng form
Form là phương tiện để thu nhận thông tin từ người sử dụng
trang web. Nếu chỉ sử dụng HTML để tạo form thì giao diện sẽ không đẹp, khó sử
dụng. Vì vậy, cần phải sử dụng CSS để định dạng thêm, giúp cho form đẹp hơn,
nhìn chuyên nghiệp, và dễ sử dụng hơn.
Xem hình minh họa dưới đây,
Khi định dạng cho form, thường sử dụng các thuộc tính quen
thuộc để định dạng cho hộp phần tử (element box) như color, background, font, border, padding. Dưới đây sẽ liệt kê một số
các thành phần chính trong một form và các định dạng phổ biến.
– Text input (ô nhập liệu) (một số kiểu text input gồm text, password, email, search, tel, url):
định dạng ô nhập liệu bằng các thuộc tính width,
height, background-color, background-image, border, border-radius, margin,
padding, và box-shadow. Với phần
văn bản trong các ô này, có thể định dạng bằng thuộc tính color hoặc các thuộc tính font.
– Phần tử textarea:
định dạng vùng nhập liệu này bằng các thuộc tính giống với phần tử text input. Ngoài ra, do phông chữ mặc định
là monospace nên có thể thay đổi để
phù hợp với các phần còn lại của form. Phần tử textarea cho phép nhập nhiều hàng dữ liệu, vì vậy có thể định dạng khoảng
cách giữa các hàng bằng thuộc tính line-height.
Mặc định, ở góc phải, bên dưới của vùng nhập liệu có biểu tượng để kéo rộng ô
nhập liệu, để gỡ bỏ biểu tượng này thiết lập resize: none.
– Button input (submit,
reset, button): đối với các nút kiểu submit,
reset, có thể áp dụng mọi thuộc tính
định dạng cho một hộp phần tử (element box), ví dụ: width, height, border, background, margin, padding, và box-shadow.
Lưu ý, cách tính kích thước mặc định của button input là border-box, do vậy kích thước (width,
và height) sẽ được tính bao gồm cả
border. Các trình duyệt thường thiết lập sẵn padding, do vậy, có thể thiết lập
lại giá trị này. Cũng có thể định dạng phần văn bản hiển thị trên các nút.
– Radio và checkbox: với các nút này, nên để nó ở chế độ mặc
định.
– Drop down và select menu: có thể thiết lập width và height cho phần tử select.
Lưu ý, mặc định, cách tính kích thước của drop down và select menu là
border-box. Các thuộc tính còn lại nên để mặc định.
– Fieldset và legend: có thể định dạng fieldset bằng mọi thuộc
tính định dạng cho một hộp phần tử (element box). Nên gỡ bỏ border để nhìn form
gọn gàng hơn. Lưu ý việc thay đổi định dạng và vị trí của legend khá khó, vì vậy
nên bọc nội dung bên trong của legend bằng phần tử b hoặc span, sau đó định
dạng các phần tử này.
Việc định dạng form tùy thuộc vào mỗi người, tuy nhiên, mục
đích cuối cùng vẫn là làm cho form nhìn đẹp hơn, chuyên nghiệp và dễ sử dụng
hơn. Có thể sử dụng bảng để căn chỉnh các thành phần của form, tuy nhiên, cách
này không linh hoạt. Do vậy, phần dưới đây sẽ thực hiện từng bước việc định dạng
một form chỉ sử dụng CSS.
Mỗi câu hỏi của form sẽ nằm trong một phần tử li, tất cả các thành phần (gọi chung là control)
của form đều có nhãn (label), sử dụng hai phần tử fieldset để nhóm các radio và
checkbox.
[HTML]
<form action="" method="">
<h2>Contest
Entry Information</h2>
<ul>
<li>
<label
for="form-name">Name</label>
<input
type="text" name="username" id="form-name"
class="textinput">
</li>
<li>
<label
for="form-email">Email</label>
<input
type="email" name="emailaddress" id="form-email"
class="textinput">
</li>
<li>
<label
for="form-tel">Telephone</label>
<input
type="tel" name="telephone" id="form-tel"
class="textinput">
</li>
<li>
<label
for="form-story">Your story</label>
<textarea
name="story" maxlength="300" id="form-story"
rows="3" cols="30" placeholder="No more than 300
characters long"></textarea>
</li>
<li>
<label
for="sizes">Size</label>
<select name="size">
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
<option>13</option>
</select>
<em>Sizes
reflect standard men's sizes</em>
</li>
<li>
<fieldset
id="colors">
<legend>Color</legend>
<ul>
<li><label><input
type="radio" name="color"
value="red">Red</label></li>
<li><label><input
type="radio" name="color" value="blue">Blue</label></li>
<li><label><input
type="radio" name="color"
value="black">Black</label></li>
<li><label><input
type="radio" name="color"
value="silver">Silver</label></li>
</ul>
</fieldset>
</li>
<li>
<fieldset
id="features">
<legend>Features</legend>
<ul>
<li><label><input
type="checkbox" name="feature"
value="laces">Sparkley laces</label></li>
<li><label><input
type="checkbox" name="feature" value="logo"
checked>Metallic logo</label></li>
<li><label><input
type="checkbox" name="feature"
value="heels">Light-up heels</label></li>
<li><label><input
type="checkbox" name="feature"
value="mp3">MP3-enabled</label></li>
</ul>
</fieldset>
</li>
<li
class="buttons">
<input
type="submit" value="Pimp My Shoes!">
<input
type="reset">
</li>
</ul>
</form>
Bước 1: thêm một số định
dạng căn bản
– Thiết lập màu nền, họ font, kích thước font, và margin cho
body
– Bỏ dấu bullet của mỗi mục trong danh sách (ul)
– Thiết lập màu nền, căn giữa, độ rộng, margin, padding, bo
góc, tạo bóng, không hiển thị phần nội dung thừa (overflow) cho form
– Ngăn ảnh hưởng của float, tăng thêm độ rộng giữa các li
Đây là đoạn mã tham khảo,
body {
background-color:
#9c9f84;
font-family:
verdana, Georgia, serif;
font-size: 14px;
margin: 0;
}
ul {
list-style-type:
none;
}
form {
background:
#deb887;
width: 40em;
margin: 1em
auto;
border-radius:
5px;
padding: 1em;
box-sizing:
border-box;
box-shadow: .2em
.2em .2em #333333;
overflow:
hidden;
}
ul li {
clear: both;
padding: .2em 0;
}
Xem hình minh họa,
Bước 2: Căn chỉnh
label và các input
Quan sát form sau Bước 1, thấy các label (nhãn) và các input
tương ứng chưa được căn chỉnh, nên các input khá lộn xộn, cái thò ra, cái thụt
vào.
– Để căn chỉnh các label: chuyển label sang kiểu block, thiết
lập độ rộng bằng nhau cho các label, float tất cả về bên trái, căn phải nội
dung của label để nó nằm sát với input tương ứng, đổi màu văn bản.
label {
display: block;
width: 5em;
float: left;
text-align:
right;
margin-right:
.5em;
color: #228b22;
}
– Tiếp tục thiết lập font,
width, height và border cho các text input
và textarea. Gỡ bỏ kí hiệu điều chỉnh
kích thước của textarea.
input.textinput {
width: 25em;
height: 2em;
border: 1px
solid #666;
}
textarea {
display: block;
width: 25em;
height: 5em;
border: 1px
solid #666;
margin-bottom:
1em;
line-height:
1.25;
overflow: auto;
resize: none;
padding: 0;
}
input.textinput, textarea {
font-family:
Georgia, "Times New Roman", Times, serif;
font-size:
.875em;
}
Xem hình minh họa,
Bước 3: Định dạng
fieldset và các label bên trong
– Ghi đè các định dạng mặc định của fieldset và định dạng lại legend
cho giống với label đã làm ở Bước 2.
fieldset {
padding: 0;
margin: 0;
border: none;
}
legend {
display: block;
width: 10em;
float: left;
color: #228b22;
text-align:
right;
margin-right:
.5em;
}
– Do bị ảnh hưởng bởi định dạng label ở các bước trước, nên
cần chỉnh lại label bên trong các fieldset, cụ thể, thực hiện đổi màu, đổi cách
hiển thị và bỏ float (cho nó về trạng thái mặc định)
#colors label, #features label {
color: #000;
display: inline;
float: none;
text-align:
inherit;
width: auto;
font-weight:
normal;
background-color:
inherit;
}
– Hiển thị các mục trong Color theo kiểu inline, để tiết kiệm
không gian,
#colors ul li {
display: inline;
margin-bottom:
0;
}
– Thêm left-margin cho toàn bộ danh sách trong Features để chúng
căn trái, thẳng hàng với các control khác,
#features ul {
margin-left: 8em;
}
– Thiết lập lại thuộc tính clear: none, để mục checkbox đầu tiên của Features không bị xuống
hàng (nghĩa là cho nó float)
#features ul li {
clear: none;
margin-bottom:
0;
}
Xem hình minh họa,
Bước 4: Điều chỉnh
các nút
– Căn chỉnh lại các nút bằng cách thiết lập margin-left cho nút submit. Thay đổi
kích thước, màu nền, bo góc, tạo bóng cho các nút.
input[type="submit"] {
margin-left:
9em;
margin-right:
1em;
color: #c00;
}
input[type="submit"], input[type="reset"] {
display: block;
width: 10em;
height: 2em;
float: left;
background-color:
white;
margin-bottom:
1em;
font-size:
inherit;
border: 1px
solid #04699d;
border-radius:
4px;
box-shadow: 2px
2px 3px rgba(0,0,0,.5);
}
Xem hình minh họa,
Ngoài ra, có thể thực hiện các hiệu ứng liên quan đến tương
tác với các control như :focus, :active, :hover.
-----------
Cập nhật [16/8/2018]
-----------
Xem thêm: Học làm web (57) - CSS căn bản (33)