Nút trong biểu mẫu

Thuộc phần Kiến thức cơ bản trong hành trình HTML của Coddy. Bài học 45 trên 60.

Các nút đóng vai trò quan trọng trong biểu mẫu, giúp gửi dữ liệu hoặc đặt lại các trường. Hãy cùng tìm hiểu cách chúng hoạt động:

<form>
	<input type="text" name="username" placeholder="Enter username">
	<button type="submit">Submit</button>
</form>

<form>
	<input type="text" name="name" value="John Doe">
	<button type="reset">Reset</button>
</form>

Thử thách

Dễ

Tạo một tài liệu HTML có biểu mẫu với nhiều loại nút khác nhau. Biểu mẫu cần có các phần tử sau:

Một trường nhập văn bản có tên "message" và placeholder ghi "Enter your message".
Thêm một nút gửi (<button type="submit">) có nội dung "Send".
Thêm một nút đặt lại (<button type="reset">) có nội dung "Clear".
Thêm một nút (<button>) có nội dung "Click Me" và không có thuộc tính type. Trong biểu mẫu, nút không có type cũng sẽ gửi biểu mẫu.

Tự làm thử

<!DOCTYPE html>
<html>
    <body>
        <!-- Viết code tại đây -->
    </body>
</html>

Tự kiểm tra

Bài học này có một bài trắc nghiệm ngắn. Bắt đầu bài học để trả lời và theo dõi tiến độ.

Tất cả bài học trong Kiến thức cơ bản

1Kiến thức cơ bản về HTML

4Thẻ công thức nấu ăn

7Trang hồ sơ cá nhân

10Bảng

2Văn bản và định dạng

5Thêm nội dung

8Biểu mẫu và đầu vào phần 1

11Trang đăng ký sự kiện

3Làm việc với danh sách

6Bố cục trang

9Biểu mẫu và đầu vào phần 2

12Thử thách cuối

Tự luyện tập: Playground Web