Mẫu thiết kế HTML

Biểu mẫu HTML là bắt buộc khi bạn muốn thu thập một số dữ liệu từ khách truy cập trang web. Ví dụ:trong quá trình đăng ký người dùng, bạn muốn thu thập thông tin như tên, địa chỉ email, thẻ tín dụng, v.v.

Một biểu mẫu sẽ nhận đầu vào từ khách truy cập trang web và sau đó sẽ đăng nó lên một ứng dụng back-end như CGI, ASP Script hoặc PHP script, v.v. Ứng dụng back-end sẽ thực hiện xử lý yêu cầu đối với dữ liệu được truyền dựa trên logic nghiệp vụ đã xác định bên trong ứng dụng.

Thẻ

được sử dụng trong HTML để tạo biểu mẫu và các phần tử biểu mẫu khác nhau như input, textarea, v.v. được bao gồm trong đó -

<form action = "Script URL" method = "GET|POST">
form elements like input, textarea etc.
</form>

Để tạo biểu mẫu, bạn cần thêm các trường như văn bản, mật khẩu, trường ngày sinh, số điện thoại, email, nút, v.v. Tất cả những trường này chúng ta có thể thêm bằng phần tử -

Sr.No	Loại &Mô tả
1	văn bản Trường văn bản dạng tự do, trên danh nghĩa là không có ngắt dòng.
2	mật khẩu Trường văn bản dạng tự do cho thông tin nhạy cảm, trên danh nghĩa là không có ngắt dòng.
3	hộp kiểm Một tập hợp không hoặc nhiều giá trị từ danh sách được xác định trước.
4	đài Một giá trị được liệt kê.
5	đệ trình Một biểu mẫu miễn phí của nút bắt đầu gửi biểu mẫu.
6	tệp Một tệp tùy ý với kiểu MIME và tùy chọn tên tệp.
7	hình ảnh Một tọa độ, liên quan đến kích thước của một hình ảnh cụ thể, với ngữ nghĩa bổ sung rằng nó phải là giá trị cuối cùng được chọn và bắt đầu gửi biểu mẫu.
8	ẩn Một chuỗi tùy ý thường không được hiển thị cho người dùng.
9	chọn Một giá trị được liệt kê, giống như kiểu radio.
10	textarea Trường văn bản dạng tự do, trên danh nghĩa không có giới hạn ngắt dòng ..
11	nút Một dạng nút miễn phí có thể bắt đầu bất kỳ sự kiện nào liên quan đến nút.

Tuy nhiên, HTML5 đã giới thiệu nhiều tùy chọn hơn cho phần tử -

Sr.No	Loại &Mô tả
1	ngày giờ Ngày và giờ (năm, tháng, ngày, giờ, phút, giây, phần nhỏ của giây) được mã hóa theo ISO 8601 với múi giờ được đặt thành UTC.
2	datetime-local Ngày và giờ (năm, tháng, ngày, giờ, phút, giây, phần nhỏ của giây) được mã hóa theo ISO 8601, không có thông tin múi giờ.
3	ngày Ngày (năm, tháng, ngày) được mã hóa theo ISO 8601.
4	tháng Ngày bao gồm một năm và một tháng được mã hóa theo ISO 8601.
5	tuần Ngày bao gồm một năm và một số tuần được mã hóa theo ISO 8601.
6	thời gian Thời gian (giờ, phút, giây, giây phân số) được mã hóa theo ISO 8601.
7	số Nó chỉ chấp nhận giá trị số. Thuộc tính step chỉ định độ chính xác, mặc định là 1.
8	phạm vi Loại phạm vi được sử dụng cho các trường đầu vào phải chứa một giá trị từ một phạm vi số.
9	email Nó chỉ chấp nhận giá trị email. Loại này được sử dụng cho các trường nhập phải chứa địa chỉ e-mail. Nếu bạn cố gắng gửi một văn bản đơn giản, nó buộc chỉ nhập địa chỉ email ở định dạng [email protected].
10	url Nó chỉ chấp nhận giá trị URL. Loại này được sử dụng cho các trường nhập phải chứa địa chỉ URL. Nếu bạn cố gắng gửi một văn bản đơn giản, nó buộc chỉ nhập địa chỉ URL ở định dạng https://www.example.com hoặc ở định dạng https://example.com.

Ví dụ

Bây giờ chúng ta hãy xem một ví dụ để tạo một biểu mẫu -

<!DOCTYPE html>
<html>
<body>
<h2>Register</h2>
<form action="" method="get">
Id: <input type="text" name="id" placeholder="Enter UserId here..."><br>
Password: <input type="password" name="pwd" placeholder="Enter password here..."><br>
DOB: <input type="date" name="dob"><br>
Telephone: <input type="tel" name="tel" placeholder="Enter mobile number here..."><br>
Email: <input type="email" name="email" placeholder="Enter email here..."><br><br>
<button type="submit" value="Submit">Submit</button>
</form>
/body>
</html>

Đầu ra

Điều này sẽ tạo ra kết quả sau -

Mẫu thiết kế HTML

Ví dụ

Bây giờ, chúng ta sẽ thấy một ví dụ khác, trong đó chúng ta đang tạo một biểu mẫu, với một trong các trường làm hộp kiểm -

<!DOCTYPE html>
<html>
<body>
<h2>Register</h2>
<form action="" method="get">
Id: <input type="text" name="id" placeholder="Enter UserId here..." size = "25"><br>
Password: <input type="password" name="pwd" placeholder="Enter password here..."><br>
DOB: <input type="date" name="dob" placeholder="Enter date of birth here..."><br>
Telephone: <input type="tel" name="tel" placeholder="Enter mobile number here..."><br>
Email: <input type="email" name="email" placeholder="Enter email here..." size = "35"><br><br>
<input type="checkbox" name="vehicle" value="Bike" checked>Newsletter Subscription: <br>
<button type="submit" value="Submit">Submit</button>
</form>
</body>
</html>

Điều này sẽ tạo ra kết quả sau -

Mẫu thiết kế HTML