Tạo biểu mẫu liên hệ để thu thập chi tiết liên hệ và ý kiến của người dùng về trang web của bạn. Làm theo các bước và tạo biểu mẫu liên hệ với CSS một cách đơn giản.
Bạn đang xem : tạo kiểu biểu mẫu liên hệ css
Bạn đã bao giờ tự hỏi tại sao mình cần biểu mẫu liên hệ trên trang web của mình chưa?
Có nhiều lý do tại sao một trang web nên có biểu mẫu liên hệ. Nếu bạn muốn biết khách truy cập nghĩ gì về trang web, các bài báo, blog của bạn hoặc thu thập chi tiết liên hệ của họ và xây dựng mối quan hệ với họ, thì cần phải có biểu mẫu liên hệ!
Trong đoạn mã này, chúng tôi sẽ trình bày cách tạo mã cho biểu mẫu liên hệ HTML và tạo kiểu cho biểu mẫu này với sự trợ giúp của CSS .
Tạo HTML
- Tạo thẻ & lt; h2 & gt; cho tiêu đề và thêm phần tử & lt; div & gt; với
class
“vùng chứa”.
- Tạo phần tử & lt; form & gt; và thêm thuộc tính
action
bằng url “/ form / submit”.
- Tạo bốn phần tử & lt; label & gt; với các thuộc tính
id
sau: “fname”, “lname”, “mail” và “country “và” tin nhắn “.
- Tạo danh sách tùy chọn thả xuống cho “quốc gia” bằng thẻ & lt; select & gt; .
- Tạo thẻ & lt; textarea & gt; để xác định trường, nơi người dùng có thể nhập văn bản nhiều dòng.
- Xác định các trường để người dùng nhập liệu bằng thuộc tính
text
của thẻ & lt; input & gt; .
- Tạo nút “Gửi” bằng thuộc tính
submit
của thẻ
& lt; input & gt;
.
& lt; h2 & gt; Biểu mẫu liên hệ & lt; / h2 & gt;
& lt; div class = "container" & gt;
& lt; form action = "/ form / submit" method = "POST" & gt;
& lt; label for = "fname" & gt; Tên & lt; / label & gt;
& lt; input type = "text" id = "fname" name = "name" placeholder = "Nhập tên của bạn .." & gt;
& lt; label for = "lname" & gt; Họ & lt; / label & gt;
& lt; input type = "text" id = "lname" name = "surname" placeholder = "Nhập họ của bạn .." & gt;
& lt; label for = "mail" & gt; Địa chỉ Email & lt; / label & gt;
& lt; input type = "text" id = "mail" name = "e-mail" placeholder = "Nhập e-mail của bạn .." & gt;
& lt; label for = "country" & gt; Country & lt; / label & gt;
& lt; select id = "country" name = "country" & gt;
& lt; option value = "italy" & gt; Ý & lt; / option & gt;
& lt; option value = "spain" & gt; Tây Ban Nha & lt; / option & gt;
& lt; option value = "france" & gt; Pháp & lt; / option & gt;
& lt; / select & gt;
& lt; label for = "message" & gt; Message & lt; / label & gt;
& lt; textarea id = "message" name = "message" placeholder = "Nhập tin nhắn của bạn .." style = "height: 200px" & gt; & lt; / textarea & gt;
& lt; input type = "submit" value = "Gửi" & gt;
& lt; / form & gt;
& lt; / div & gt;
Thêm CSS
- Tạo kiểu cho & lt; select & gt; và & lt; textarea & gt; bằng cách đặt width , padding , margin-top và margin-bottom .
- Làm tròn một chút đường viền bằng thuộc tính border-radius .
- Đặt
textarea
chỉ thay đổi kích thước theo chiều dọc với thuộc tính resize .
- Tạo kiểu cho nút “Gửi” với đường viền background-color , color , padding và
thuộc tính -radius
.
- Xác định loại con trỏ .
- Đặt
background-color
, màu này sẽ thay đổi khi bạn di chuột.
input
[type = text]
,
lựa chọn,
textarea
{
width
: 100%
;
padding
: 8px
;
border
: 1px
solid # eeeeee
;
border-radius
: 4px
;
kích thước hộp
: border-box;
margin-top
: 8px
;
margin-bottom
: 16px
;
thay đổi kích thước
: vertical;
}
input
[type = submit]
{
background-color
: # 4cd9c6
;
color
: # ffffff
; padding
: 12px
20px
;
border
: none;
border-radius
: 7px
;
con trỏ
: con trỏ;
}
input
[type = submit]
: hover
{
background-color
: # 6fe8d7
;
}
Đây là mã đầy đủ của biểu mẫu liên hệ.
& lt;
html
& gt;
& lt;
head
& gt;
& lt;
title
& gt; Tiêu đề của tài liệu & lt; /
title
& gt;
& lt;
style
& gt;
body
{
font-family
: Arial, Helvetica, sans-serif;
}
* {
kích thước hộp
: border-box;
}
input
[type = text]
,
lựa chọn,
textarea
{
width
: 100%
;
padding
: 8px
;
border
: 1px
solid # eeeeee
;
border-radius
: 4px
;
kích thước hộp
: border-box;
margin-top
: 8px
;
margin-bottom
: 16px
;
thay đổi kích thước
: vertical;
}
input
[type = submit]
{
background-color
: # 4cd9c6
;
color
: # ffffff
;
padding
: 12px
20px
;
border
: none;
border-radius
: 7px
;
con trỏ
: con trỏ;
}
input
[type = submit]
: hover
{
background-color
: # 6fe8d7
;
}
. container
{
border-radius
: 8px
;
background-color
: # e6e6e6
;
padding
: 15px
;
}
& lt; /
style
& gt;
& lt; /
head
& gt;
& lt;
body
& gt;
& lt;
h2
& gt; Biểu mẫu liên hệ & lt; /
h2
& gt;
& lt;
div
class
= " container "
& gt;
& lt;
form
action
= " / form / submit "
method
= " POST "
& gt;
& lt;
label
cho
= " fname "
& gt; Tên & lt; /
nhãn
& gt;
& lt;
input
type
= " text "
id
= " fname "
name
= " name "
placeholder
= " Nhập tên của bạn .. "
& gt;
& lt;
label
cho
= " lname "
& gt; Họ & lt; /
nhãn
& gt;
& lt;
input
type
= " text "
id
= " lname "
tên
= " họ "
trình giữ chỗ
= " Nhập họ của bạn .. "
& gt; & lt;
label
cho
= " lname "
& gt; Địa chỉ Email & lt; /
label
& gt;
& lt;
input
type
= " text "
id
= " mail "
name
= " e-mail "
placeholder
= " Nhập e-mail của bạn .. "
& gt;
& lt;
label
cho
= " ci "
& gt; Quốc gia & lt; /
label
& gt;
& lt;
chọn
id
= " country "
name
= " country "
& gt;
& lt;
option
value
= " italy "
& gt; Ý & lt; /
option
& gt;
& lt;
option
value
= " spain "
& gt; Tây Ban Nha & lt; /
option
& gt;
& lt;
option
value
= " france "
& gt; Pháp & lt; /
tùy chọn
& gt;
& lt; /
chọn
& gt;
& lt;
label
cho
= " message "
& gt; Tin nhắn & lt; /
label
& gt;
& lt;
textarea
id
= " message "
name
= " message "
placeholder
= " Nhập tin nhắn của bạn .. "
style
= "height: 200px"
& gt; & lt; /
textarea
& gt ;
& lt;
input
type
= " submit "
value
= " Gửi "
& gt;
& lt; /
biểu mẫu
& gt;
& lt; /
div
& gt;
& lt; /
body
& gt;
& lt; /
html
& gt;
Hãy tự mình thử »
Kết quả
Tên
Họ
Địa chỉ email
Quốc gia
Thông điệp
& lt;
html
& gt;
& lt;
head
& gt;
& lt;
title
& gt; Tiêu đề của tài liệu & lt; /
title
& gt;
& lt;
style
& gt;
nhãn
{
font-family
: 'Open Sans'
sans-serif;
color
: # fff
;
margin
: 0
;
}
. container
{
display
: block;
border
: 8px
solid # 414178
;
border-radius
: 10px
;
margin
: 0
auto;
padding
: 0
0
10px
10px
;
max-width
: 330px
;
background-color
: # ac9dd1
;
}
. title
{
display
: inline-block;
}
. title
h2
{
padding
: 0
10px
0
0px
; margin
: 5px
0
;
color
: # FBFBFB
;
}
biểu mẫu
{
padding
: 10px
10px
0
0
;
}
giờ {
width
: 100%
;
display
: block;
margin
: 5px
0
;
height
: 5px
;
border
: 0
;
background-color
: # ffffff
;
}
input
,
textarea
{
width
: 100%
;
border
: 5px
solid # FFFFFF
;
border-radius
: 3px
;
thay đổi kích thước
: none;
padding
: 0
5px
;
kích thước hộp
: border-box;
font-family
: 'Open Sans'
sans-serif;
font-size
: 16px
;
color
: # 000000
;
}
input
[type =
"text"
] ,
input
[type =
"email"
] {
padding
: 0
1px
;
height
: 40px
;
width
: 100%
;
}
input
: focus
,
textarea
: tiêu điểm
{
outline
: none;
}
. form-input
{
margin
: 5px
0
10px
0
;
}
. form-textarea
{
margin
: 5px
0
;
width
: 100%
;
height
: 100px
;
}
input
[type =
"submit"
] {
width
: 100%
;
height
: 50px
;
background-color
: # 414178
;
border
: 0
;
color
: # fff
;
border
: 5px
solid # 414178
;
border-radius
: 8px
;
margin
: 10px
0
0
0
;
font-family
: 'Open Sans'
sans-serif;
font-size
: 22px
;
}
& lt; /
style
& gt;
& lt; /
head
& gt;
& lt;
body
& gt;
& lt;
div
class
= " wrapper "
& gt;
& lt;
div
class
= " container "
& gt;
& lt;
div
class
= " title "
& gt;
& lt;
h2
& gt;
Liên hệ chúng tôi
& lt;
giờ
& gt;
& lt; /
h2
& gt;
& lt; /
div
& gt;
& lt;
form
class
= " form "
action
= " / form / submit "
phương thức
= "ĐĂNG"
& gt;
& lt;
label
cho
= " name "
& gt; Tên & lt; /
nhãn
& gt;
& lt;
input
class
= " form-input "
type
= " text "
tên
= " tên "
id
= " tên "
& gt;
& lt;
label
cho
= " email "
& gt; Email & lt; /
label
& gt;
& lt;
input
class
= " form-input "
type
= " email "
tên
= " email "
id
= " email "
& gt;
& lt;
label
& gt; Thông báo & lt; /
nhãn
& gt;
& lt;
textarea
class
= " form-textarea "
type
= " text "
& gt; & lt; /
textarea
& gt;
& lt;
input
type
= " submit "
value
= " Gửi "
& gt;
& lt; /
biểu mẫu
& gt;
& lt; /
div
& gt;
& lt; /
div
& gt;
& lt; /
body
& gt;
& lt; /
html
& gt;
Hãy tự mình thử »
Xem thêm những thông tin liên quan đến chủ đề tạo kiểu cho một biểu mẫu liên hệ css
Dựng layout với CSS cho người mới bắt đầu – Lớp Frontend Buổi 4
- Tác giả: SUNTECH VIỆT NAM
- Ngày đăng: 2020-03-27
- Đánh giá: 4 ⭐ ( 2205 lượt đánh giá )
- Khớp với kết quả tìm kiếm: Ở SUNTECH học viên được học dựng giao diện bằng cả 3 kỹ thuật: Float, Flex, Grid
Nhiều bạn nói là bây giờ mà còn dựng giao diện với Float nữa là lỗi thời.
Chắc chắn là bạn đã nhầm. Float vẫn có vai trò quan trọng khi dựng layout mặc dù Flex đang được lựa chọn nhiều hơnVà một điều quan trong, là một Frontend Developer mà không biết dựng giao diện bằng Float thì chứng tỏ kỹ năng của bạn chưa hoàn thiện
– – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – –
Đăng ký kênh để nhận thông báo video mới nhất từ SUNTECH: https://goo.gl/1ZxwCS
– – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – –
Danh sách video khóa học lập trình Laravel tại SUNTECH
https://www.youtube.com/watch?v=YV25kxBt2Sg&list=PLh5At4osX60LuzjTR3NWhAXiFGVRogFoe
– – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – –
hoclaptrinh hoclaptrinhmienphi suntechvietnam
– – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – –
Mọi chi tiết xin liên hệ:
Name: Phạm Kỳ Khôi
Email: daotaolaptrinhsuntech@gmail.com
Phone: 0942 668 586
Zalo: 0942 668 586
Website: https://suntech.edu.vn
Fan-page: https://www.facebook.com/suntech.edu.vn
Group: https://www.facebook.com/groups/hoclaptrinhmienphi.vn
Biểu Mẫu Liên Hệ
- Tác giả: www.liveagent.vn
- Đánh giá: 4 ⭐ ( 6142 lượt đánh giá )
- Khớp với kết quả tìm kiếm: Ẩn địa chỉ email của bạn để tránh Spam, tạo ra nhiều địa chỉ khách hàng tiềm năng hơn bằng việc đem lại phương thức liên hệ dễ dàng với tính năng của LiveAgent – Biểu Mẫu Liên Hệ. Tìm hiểu thêm về nó.
Hướng dẫn cách tạo, tùy chỉnh, thiết kế, CSS form bằng contact form 7 – Công Ty TNHH Truyền Thông & Công nghê Tuệ Lâm Soft
- Tác giả: tuelamsoft.com
- Đánh giá: 4 ⭐ ( 2560 lượt đánh giá )
- Khớp với kết quả tìm kiếm:
Bài 36: Forms – Biểu mẫu trong CSS
- Tác giả: timoday.edu.vn
- Đánh giá: 4 ⭐ ( 2975 lượt đánh giá )
- Khớp với kết quả tìm kiếm: Giao diện của một biểu mẫu HTML có thể được cải thiện hơn với CSS: Nội dungTạo kiểu cho các trường đầu vàoĐịnh dạng padding cho trường đầu vàoĐịnh dạng đường viền cho trường…
Biểu mẫu trong CSS (CSS form)
- Tác giả: laptrinhtudau.com
- Đánh giá: 4 ⭐ ( 1249 lượt đánh giá )
- Khớp với kết quả tìm kiếm: Tạo kiểu cho trường đầu vào, Tạo kiểu cho menu chọn, Tạo kiểu cho các nút, Biểu mẫu đáp ứng
Cách tạo Biểu mẫu liên hệ HTML5 / CSS3 dựa trên Ajax / Mã hóa
- Tác giả: vi.phhsnews.com
- Đánh giá: 4 ⭐ ( 1303 lượt đánh giá )
- Khớp với kết quả tìm kiếm: Biểu mẫu liên hệ là rất cần thiết cho bất kỳ trang web nào, vì nó hoạt động như một trình nhắn tin chuyển ý kiến hoặc yêu cầu của khách truy cập đến quản trị trang web. Ở đây có
Trang Liên hệ sử dụng Google Biểu mẫu – Init HTML
- Tác giả: www.inithtml.com
- Đánh giá: 4 ⭐ ( 7307 lượt đánh giá )
- Khớp với kết quả tìm kiếm: Ở template-contact.php lần trước, chúng ta còn Biểu mẫu liên hệ chưa hoạt động. Bài viết này giới thiệu cách nhúng Google Biểu mẫu vào…
Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình