Nhiệm vụ Tạo biểu mẫu trong trang web Yêu cầu Một biểu mẫu đăng nhập cơ bản
Nhiệm vụ: Tạo biểu mẫu trong trang web
Giải Tin học 12 Bài F5: Tạo biểu mẫu trong trang web - Chân trời sáng tạo
Thực hành trang 97 Tin học 12: Nhiệm vụ: Tạo biểu mẫu trong trang web
Yêu cầu: Một biểu mẫu đăng nhập cơ bản gồm có hai hộp văn bản để nhập Tên người dùng và Mật khẩu kèm theo đó là nút nhấn Đăng nhập (Hình 6).
Lời giải:
Để tạo hộp văn bản nhập tên người dùng:
Tên người dùng:
Mật khẩu:
Đăng nhập
Em sử dụng thẻ <input> và chỉ định thuộc tính type là text. Để tạo hộp văn bản nhập mật khẩu, em sử dụng thẻ <input> nhưng chỉ định thuộc tính type là password. Khi nhập vào, mật khẩu sẽ được che bằng các kí tự là dấu chấm.
Trong cả hai thẻ <input> này, em thêm thuộc tính required nhằm bắt buộc người dùng nhập dãy tủ. Ngoài ra, em có thể chỉ định dữ liệu ban dấu cho hai hộp văn bản bằng cách sử dụng thuộc tính value.
Khi người dùng nhảy chọn nút Đứng nhập, dữ liệu tên người dùng và mật khẩu sẽ được gửi về trang nhận dữ liệu để xử lị, do đó em chỉ định giả trị submit cho thuộc tính type của the <button>.
Các bước thực hiện như sau:
Khởi động Visual Studio Code và tạo tệp login.html.
Trong tệp login.html, viết các thẻ để khai báo một trang web đơn giản như chtml>, <head>, <body>.
<form>
* Trong thẻ <body>, viết thêm đoạn mà IITML để tạo biểu mẫu đăng nhập.
</form>
<label for="username">Tên người dùng:</label><br>
<input type="text" id="username" name="username" value="" required><br> <label for="password">Mật khẩu:</label><br>
<input type="password" id="password" name="password" value="" required><br> <button type="submit" Đăng nhập</button>
4 Nháy đúp chuột vào tập login.html để kiểm tra kết quả.
Lời giải bài tập Tin học 12 Bài F5: Tạo biểu mẫu trong trang web hay khác:
Khởi động trang 94 Tin học 12: Khi truy xuất trang web, người dùng không chỉ xem nội dung ....
Hoạt động trang 94 Tin học 12: Em hãy kể tên một số biểu mẫu phổ biến trên các trang web ....
Hoạt động trang 97 Tin học 12: Em hãy thêm vào biểu mẫu trong các ví dụ trên những thành phần ....
Luyện tập 1 trang 97 Tin học 12: Em hãy nêu khái niệm biểu mẫu web và một số ví dụ biểu ....
Luyện tập 2 trang 97 Tin học 12: Thảo luận với bạn và kể tên một số thành phần nhập liệu trên ....
Luyện tập 3 trang 97 Tin học 12: Theo em, tên, giá trị và ý nghĩa của những thuộc tính trong ....
Vận dụng trang 98 Tin học 12: Em hãy thực hiện các yêu cầu dưới đây ....