1. Giới thiệu biểu mẫu
1.2 Phần tử Form
Các thẻ con trong form
Các thẻ con trong form mục đích hỗ trợ người dùng để nhập liệu
Cú pháp:
Trong đó:
- type: Quy định kiểu dữ liệu nhập vào + text: Dữ liệu nhập vào là chữ (string) + number: dữ liệu nhập vào là số
+ email: dữ liệu nhập vào là địa chỉ email. + password: Mã hóa dữ liệu nhập vào. + file: chọn file để upload.
+ submit: dạng button để submit. + radio: cho phép chọn.
+ checkbox: cho phép chọn.
+ date: Ngày tháng năm, tùy từng trình duyệt mà nó hiển thị khác nhau. -name, id: tự đặt tên
-size: quy định chiều dài của input. Chỉ có ý nghĩa với text và password. -placehode: Mô tả nội dung dữ liệu cần nhập (hay mô tả cho input).
<formaction=""method=""enctype="multipart/form-data"> <! Các thẻ con của form -->
</form>
- value: chứa giá trị người dùng nhập vào. Quan trọng khi làm việc với js và ngôn ngữ phía sever, chính là chứa giá trị người dùng nhập vào. Value có thể gán giá trị luôn
Ví dụ: Lưu fileform input.html
Dưới đây là ví dụ cơ bản của việc sử dụng Text Input chỉ có một dòng sử dụng để nhận tên và họ.
<!DOCTYPE html> <html>
<head>
<title>Vi du Text Input trong HTML</title> </head>
<body> <form >
First name: <input type="text" name="first_name" /> <br>
Last name: <input type="text" name="last_name" /> </form>
</body> </html>
Nó sẽ tạo ra kết quả sau: First name:
Last name:
Ví dụ 2: Lưu file password.html
Sau đây là một ví dụ đơn giản về Password Input được sử dụng để nhận mật khẩu người dùng:
<!DOCTYPE html> <html>
<head>
<title>Ví dụ Password Input trong HTML</title> </head>
<body> <form >
User ID : <input type="text" name="user_id" /> <br>
Password: <input type="password" name="password" /> </form>
</body> </html>
<meta charset="UTF-8">
<meta name="viewport"content="width=device-width, initial-scale=1.0"> <title>Form in html</title>
</head> <body>
<formaction=""method="">
<inputtype="text"size="60px"placeholder="Email hoặc số điện thoại"> <br>
<br>
<inputtype="password"size="60px" value="xuantham" placeholder="Mật khẩu ">
<br>
<inputtype="nunber"size="60px placeholder="Số điện thoại"> <br>
Nam<inputtype="radio" name="gender"> Nữ<inputtype="radio"name="gender">
<br> <br>
Nam<inputtype="file"name="avartar"> <br>
<h3>Sở thích</h3>
Bóng đá<inputtype="checkbox"> Bóng truyền<inputtype="checkbox"> Bóng rổ<inputtype="checkbox">
<br> <br>
Ngày sinh nhật<inputtype="date"> <br>
<br>
<inputtype="submit"value="Đăng Ký"> <inputtype="submit"value="Đăng ký lại"> </form>
</body> </html>