CSS Form được dùng để tạo form tương tác cho người dùng. CSS cung cấp nhiều cách để thiết lập kiểu dáng.
Có nhiều thuộc tính CSS có sẵn để tạo và tạo kiểu cho form HTML. Điều này giúp form trở nên tương tác hơn. Một số thuộc tính được liệt kê dưới đây.
CSS Forms Styling Examples
. Attribute Selector:
Thuộc tính "type" của form nhập có thể có nhiều dạng khác nhau. Nó phụ thuộc vào lựa chọn của người dùng. Nó có thể là text, search, url, tel, email, password, date pickers, number, checkbox, radio, file,... Người dùng cần chỉ định "type" khi tạo form.
Example:
HTML<!DOCTYPE html>
<html>
<head>
<style>
body{
background-color:green;
}
</style>
</head>
<body>
<center>
<b>Is Geeksforgeeks useful ?</b>
<form>
<input type="radio" name="useful" value="yes" checked>
Yes <br>
<input type="radio" name="useful" value="def_yes">
Definitely Yes
</form>
</center>
</body>
</html>
Output:
Xem xét một ví dụ khác khi kiểu nhập liệu chỉ đơn giản là văn bản:
HTML<!DOCTYPE html>
<html>
<head>
<style>
body{
background-color:green;
}
</style>
</head>
<body>
<center>
<form>
<b>Do you find Geeksforgeeks helpful?</b>
<br>
<input type="text" name="info"><br>
</form>
</center>
</body>
</html>
Output:
. Styling the Width of Input:
Thuộc tính width được sử dụng để thiết lập chiều rộng của trường nhập liệu. Xem xét ví dụ bên dưới, chiều rộng được đặt thành 10% toàn màn hình.
HTML<!DOCTYPE html>
<html>
<head>
<style>
input{
width:10%;
}
body{
background-color:green;
}
</style>
</head>
<body>
<center>
<form>
<b>Do you find Geeksforgeeks helpful?</b>
<br>
<input type="text" name="info"><br>
</form>
</center>
</body>
</html>
Output:
. Add Padding in Inputs:
Thuộc tính padding được sử dụng để thêm khoảng trắng bên trong trường văn bản. Hãy xem ví dụ bên dưới nhé.
HTML<!DOCTYPE html>
<html>
<head>
<style>
input{
width:10%;
padding: 12px;
}
body{
background-color:green;
}
</style>
</head>
<body>
<center>
<form>
<b>Do you find Geeksforgeeks helpful?</b><br>
<input type="text" name="info"><br>
</form>
</center>
</body>
</html>
Output:
. Set Margin for Inputs:
Thuộc tính margin được sử dụng để thêm khoảng trắng bên ngoài trường nhập liệu. Nó hữu ích khi có nhiều trường nhập liệu. Hãy xem ví dụ bên dưới với hai trường nhập liệu. Hãy quan sát khoảng cách (margin) giữa chúng nhé.
HTML<!DOCTYPE html>
<html>
<head>
<style>
input{
width:10%;
margin: 8px;
}
body{
background-color:green;
}
</style>
</head>
<body>
<center>
<form>
<b>Mention two topics that you liked on Geeksforgeeks</b>
<br>
<input type="text" name="info"><br>
<input type="text" name="info"><br>
</form>
</center>
</body>
</html>
Output:
. Adding Border and Border-radius:
Thuộc tính border được sử dụng để thay đổi kích thước và màu sắc của đường viền. Thuộc tính border-radius được dùng để thêm các góc tròn. Hãy xem ví dụ bên dưới nhé. Một đường viền 2px solid red được tạo với bán kính bo tròn là 4px.
HTML<!DOCTYPE html>
<html>
<head>
<style>
input{
width:10%;
margin: 8px;
border: 2px solid red;
border-radius: 4px;
}
body{
background-color:green;
}
</style>
</head>
<body>
<center>
<form>
<b>
Mention two topics that you liked on
Geeksforgeeks
</b>
<br>
<input type="text" name="info"><br>
<input type="text" name="info"><br>
</form>
</center>
</body>
</html>
Output:
Note: Người dùng có thể có đường viền ở bất kỳ cạnh cụ thể nào. Người dùng có thể loại bỏ những đường viền khác hoặc có tất cả các đường viền với màu sắc khác nhau. Hãy xem ví dụ dưới đây. Người dùng muốn đường viền chỉ ở trên cùng (màu xanh lam) và dưới cùng (màu đỏ).
HTML<!DOCTYPE html>
<html>
<head>
<style>
input{
width:10%;
margin: 8px;
border: none;
border-top: 3px solid blue;
border-bottom: 3px solid red;
}
body{
background-color:green;
}
</style>
</head>
<body>
<center>
<form>
<b>
Mention two topics that you liked on
Geeksforgeeks
</b>
<br>
<input type="text" name="info"><br>
<input type="text" name="info"><br>
</form>
</center>
</body>
</html>
Output:
. Adding Color to text and Background:
Thuộc tính color được dùng để thay đổi màu văn bản trong ô nhập liệu. Thuộc tính background-color được dùng để thay đổi màu nền của ô nhập liệu. Hãy xem ví dụ dưới đây. Màu của văn bản là màu đen, màu nền được đặt thành màu xanh lục..
HTML<!DOCTYPE html>
<html>
<head>
<style>
input{
width:10%;
margin: 8px;
border: none;
background-color: green;
color: black;
}
body{
background-color:white;
}
</style>
</head>
<body>
<center>
<form>
<b>
Mention two topics that you liked
on Geeksforgeeks
</b>
<br>
<input type="text" name="info"><br>
<input type="text" name="info"><br>
</form>
</center>
</body>
</html>
Output:
. Focus Selector:
Khi nhấp vào trường nhập liệu, nó sẽ có viền màu xanh lam. Bạn có thể thay đổi điều này bằng cách dùng bộ chọn :focus. Hãy xem ví dụ dưới đây. Người dùng muốn viền màu đỏ liền nét 3px và nền màu xanh lục khi được focus.
HTML<!DOCTYPE html>
<html>
<head>
<style>
input{
width:10%;
margin: 8px;
color: black;
}
input[type=text]:focus {
border: 3px solid red;
background-color: green;
}
body{
background-color:white;
}
</style>
</head>
<body>
<center>
<form>
<b>
Mention two topics that you liked
on Geeksforgeeks
</b>
<br>
<input type="text" name="info"><br>
<input type="text" name="info"><br>
</form>
</center>
</body>
</html>
Output:
. Adding images in the Input form:
Thuộc tính background-image có thể được sử dụng để đặt hình ảnh bên trong biểu mẫu nhập liệu. Nó có thể được định vị bằng cách dùng thuộc tính background-position. Người dùng cũng có thể quyết định có lặp lại hay không. Hãy xem ví dụ bên dưới có hình ảnh ở chế độ không lặp lại.
<!DOCTYPE html>
<html>
<head>
<style>
input{
width: 20%;
background-image: url('search.png');
background-position: 10px 10px;
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
}
body{
background-color:white;
}
</style>
</head>
<body>
<center>
<form>
<b>Search on Geeksforgeeks</b><br>
<input type="text" name="info" placeholder="Search.."><br>
</form>
</center>
</body>
</html>
Output:
. Transition Property:
Thuộc tính transition có thể được sử dụng trên trường nhập liệu. Nó dùng để thay đổi kích thước của trường bằng cách chỉ định chiều rộng thoải mái. Bạn cũng cần chỉ định chiều rộng khi focus cùng với khoảng thời gian thực hiện. Hãy xem ví dụ bên dưới. Chiều rộng trường nhập liệu ban đầu là 15%. Khi focus, nó thay đổi thành 30% trong 1 giây.
HTML<!DOCTYPE html>
<html>
<head>
<style>
input{
width: 15%;
-webkit-transition: width 1s ease-in-out;
transition: width 1s ease-in-out;
}
input[type=text]:focus {
width: 30%;
border:4px solid blue;
}
body{
background-color:green;
}
</style>
</head>
<body>
<center>
<form>
<b>Search on Geeksforgeeks</b><br>
<input type="text" name="info" placeholder="Search.."><br>
</form>
</center>
</body>
</html>
Output: When Relaxed-
When focused-
