Giải Tin học 12 trang 97 Chân trời sáng tạo

Với Giải Tin học 12 trang 97 trong Bài F5: Tạo biểu mẫu trong trang web Tin học 12 Chân trời sáng tạo hay nhất, ngắn gọn sẽ giúp học sinh dễ dàng trả lời các câu hỏi & làm bài tập Tin 12 Khoa học máy tính trang 97.

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 sau:

a. Hộp văn bản để người dùng cập nhập địa chỉ emai.

b. Hộp kiểm để người dùng chọn thêm một câu lạc bộ

c. Nhấn nút để xoá dữ liệu hiện có trên biểu mẫu.

Lời giải:

a. Hộp văn bản để người dùng cập nhập địa chỉ emai.

Code như sau:

   

Biểu mẫu góp ý

   

   

   

    Nhập địa chỉ mail:

   

   

   

Kết quả:

b. Hộp kiểm để người dùng chọn thêm một câu lạc bộ

Code như sau:

Chọn câu lạc bộ bạn đang tham gia:

CLB Bóng đá

CLB Vovinam

CLB Văn nghệ

   

c. Nhấn nút để xoá dữ liệu hiện có trên biểu mẫu.

Code như sau:

Nhập ý kiến đóng góp của bạn:

Gửi

   

Kết quả:

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 mẫu thông dụng.

Lời giải:

Biểu mẫu web là thành phần để người dùng nhập dữ liệu vào web. Người dùng có thể tương tác với web thông qua biểu mẫu theo nhiều cách thức khác nhau như nhập dữ liệu văn bản, số, email, mật khẩu hoặc chọn nhiều phương án, nháy chuột vào nút nhấn.

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 biểu mẫu web và thẻ HTML tương ứng để tạo các thành phần đó.

Lời giải:

Một số thành phần nhập liệu trên biểu mẫu web và thẻ HTML tương ứng để tạo các thành phần đó:

- Biểu mẫu web được tạo từ thẻ

- Thẻ được dùng hiển thị tên nhãn cho các thẻ khác của biểu mẫu như , giúp người dùng dễ nhận biết cách thành phần khi thao tác.</span></p> <p><span style="color: black;">- Thẻ <imput> có các thuộc tính: id, name, for, type…</span></p> <p><span style="color: black;">- Thẻ <textarea> để tạo hộp văn bản cho phép nhập nhiều dòng.</span></p><a name="luyentap3"></a> <p><b style="color:green;">Luyện tập 3 trang 97 Tin học 12: </b>Theo em, tên, giá trị và ý nghĩa của những thuộc tính trong thẻ <input> là gì?</p><p><b style="color:green;">Lời giải:</b> </p> <p><span style="color: black;">Tên, giá trị và ý nghĩa của những thuộc tính trong thẻ <input> là:</span></p> <p><span style="color: black;">- Thuộc tính type được chỉ định là tex cho biết hộp văn bản này chỉ cho phép nhập một dòng.</span></p> <p><span style="color: black;">- Thuộc tính id dùng để chỉ định mã định danh của thẻ <input> nhằm phần biệt với các thẻ <input> khác. Trong một biểu mẫu, thuộc tính <id> thường được dùng<span>  </span>để để xác định một phần tử cụ thể để thao tác với CSS hoặc Java, thuộc tính name thường được dùng để xác định dữ liệu của phần tử khi gửi biểu mẫu lên máy chủ.</span></p> <p><span style="color: black;">- Thuộc tính name của hai thẻ <input> được chỉ định cùng một giá trị (dinhhuong) để hai nút tròn cùng thuộc một nhóm phương án chung, khi người dùng chọn một phương án thì các phương án còn lại sẽ tự động huỷ chọn.</span></p><a name="thuchanh"></a> <p><b style="color:green;">Thực hành trang 97 Tin học 12: </b>Nhiệm vụ: Tạo biểu mẫu trong trang web</p> <p>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).</p> <p><b style="color:green;">Lời giải:</b> </p><p><span style="color: black;">Để tạo hộp văn bản nhập tên người dùng:</span></p> <p><span style="color: black;">Tên người dùng:</span></p> <p><span style="color: black;">Mật khẩu:</span></p> <p><span style="color: black;">Đăng nhập</span></p> <img src="https://i0.wp.com/hoconline.club/tin-hoc-12-ct/images/thuc-hanh-trang-97-tin-hoc-12-khmt.PNG" alt="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"> <p><span style="color: black;">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.</span></p> <p><span style="color: black;">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>.</span></p> <p><span style="color: black;">Các bước thực hiện như sau:</span></p> <p><span style="color: black;">Khởi động Visual Studio Code và tạo tệp login.html.</span></p> <p><span style="color: black;">Trong tệp login.html, viết các thẻ để khai báo một trang web đơn giản như chtml>, <head>, <body>.</span></p> <p><span style="color: black;"><form></span></p> <p><span style="color: black;">* Trong thẻ <body>, viết thêm đoạn mà IITML để tạo biểu mẫu đăng nhập.</span></p> <p><span style="color: black;"></form></span></p> <p><span style="color: black;"><label for="username">Tên người dùng:</label><br></span></p> <p><span style="color: black;"><input type="text" id="username" name="username" value="" required><br> <label for="password">Mật khẩu:</label><br></span></p> <p><span style="color: black;"><input type="password" id="password" name="password" value="" required><br> <button type="submit" Đăng nhập</button></span></p> <p><span style="color: black;">4 Nháy đúp chuột vào tập login.html để kiểm tra kết quả.</span></p><p>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:</p> <ul class="list"> <li><p><a href="../tin-hoc-12-ct/giai-tin-hoc-12-trang-94-khmt.jsp"><b style="color:green;">Giải Tin học 12 trang 94</b></a></p></li> </ul><p>Xem thêm lời giải bài tập Tin học lớp 12 Chân trời sáng tạo hay nhất, ngắn gọn khác:</p> <ul class="list"> <li><p><a href="../tin-hoc-12-ct/bai-f-6-du-an-tao-trang-web-khmt.jsp"><b style="color:green;">Tin học 12 Bài F6: Dự án tạo trang web</b></a></p></li> <li><p><a href="../tin-hoc-12-ct/bai-f-7-gioi-thieu-css-khmt.jsp"><b style="color:green;">Tin học 12 Bài F7: Giới thiệu CSS</b></a></p></li> <li><p><a href="../tin-hoc-12-ct/bai-f-8-mot-so-thuoc-tinh-co-ban-cua-css-khmt.jsp"><b style="color:green;">Tin học 12 Bài F8: Một số thuộc tính cơ bản của CSS</b></a></p></li> <li><p><a href="../tin-hoc-12-ct/bai-f-9-mot-so-ki-thuat-dinh-kieu-bang-vung-chon-trong-css-khmt.jsp"><b style="color:green;">Tin học 12 Bài F9: Một số kĩ thuật định kiểu bằng vùng chọn trong CSS</b></a></p></li> <li><p><a href="../tin-hoc-12-ct/bai-f-10-dinh-kieu-css-cho-sieu-lien-ket-va-danh-sach-khmt.jsp"><b style="color:green;">Tin học 12 Bài F10: Định kiểu CSS cho siêu liên kết và danh sách</b></a></p></li> </ul><p>Xem thêm các tài liệu học tốt lớp 12 hay khác:</p> <ul class="list"> <li><a href="../tin-hoc-12-ct/"><b style="color:blue;">Giải sgk Tin học 12 Chân trời sáng tạo</b></a></li> <li><a href="../chuyen-de-tin-hoc-12/giai-chuyen-de-hoc-tap-tin-hoc-12-chan-troi.jsp"><b style="color:blue;">Giải Chuyên đề Tin học 12 Chân trời sáng tạo</b></a></li> <li><a href="../sbt-tin-hoc-12-ct/"><b style="color:blue;">Giải SBT Tin học 12 Chân trời sáng tạo</b></a></li> <li><a href="../series/sach-lop-12-chan-troi-sang-tao.jsp"><b style="color:blue;">Giải lớp 12 Chân trời sáng tạo (các môn học)</b></a></li> <li><a href="../series/sach-lop-12-ket-noi-tri-thuc.jsp"><b style="color:blue;">Giải lớp 12 Kết nối tri thức (các môn học)</b></a></li> <li><a href="../series/sach-lop-12-canh-dieu.jsp"><b style="color:blue;">Giải lớp 12 Cánh diều (các môn học)</b></a></li></ul> <div> </div> <div> </div> <div class="paging paging-btn"> <a href="../tin-hoc-12-ct/bai-f-5-tao-bieu-mau-trong-trang-web-khmt.jsp"><i class="icon icon-arrow-circle-o-left big-font"></i> Trang trước</a> <a href="../tin-hoc-12-ct/bai-f-5-tao-bieu-mau-trong-trang-web-khmt.jsp">Trang sau <i class="icon icon-arrow-circle-o-right big-font"></i></a> </div> <div class="fb-comments" data-order-by="social" data-href="https://hoconline.club/tin-hoc-12-ct/giai-tin-hoc-12-trang-97-khmt.jsp" data-width="100%" data-numposts="5"></div><hr><div class="bottomgooglead"> <div class="bottomadtag">Giải bài tập lớp 12 Chân trời sáng tạo khác</div> </div> <div> <ul class="list"> <li><a href="https://hoconline.club/soan-van-lop-12-ct/">Soạn văn 12 (hay nhất) - CTST</a></li> <li><a href="https://hoconline.club/soan-van-12-ct/">Soạn văn 12 (ngắn nhất) - CTST</a></li> <li><a href="https://hoconline.club/toan-12-ct/">Giải sgk Toán 12 - CTST</a></li> <li><a href="https://hoconline.club/tieng-anh-12-moi/tieng-anh-12-global-success.jsp">Giải Tiếng Anh 12 Global Success</a></li> <li><a href="https://hoconline.club/tieng-anh-12-ilearn/">Giải sgk Tiếng Anh 12 Smart World</a></li> <li><a href="https://hoconline.club/tieng-anh-12-ct/">Giải sgk Tiếng Anh 12 Friends Global</a></li> <li><a href="https://hoconline.club/vat-li-12-ct/">Giải sgk Vật Lí 12 - CTST</a></li> <li><a href="https://hoconline.club/hoa-hoc-12-ct/">Giải sgk Hóa học 12 - CTST</a></li> <li><a href="https://hoconline.club/sinh-hoc-12-ct/">Giải sgk Sinh học 12 - CTST</a></li> <li><a href="https://hoconline.club/lich-su-12-ct/">Giải sgk Lịch Sử 12 - CTST</a></li> <li><a href="https://hoconline.club/dia-li-12-ct/">Giải sgk Địa Lí 12 - CTST</a></li> <li><a href="https://hoconline.club/kinh-te-phap-luat-12-ct/">Giải sgk Giáo dục KTPL 12 - CTST</a></li> <li><a href="https://hoconline.club/tin-hoc-12-ct/">Giải sgk Tin học 12 - CTST</a></li> <li><a href="https://hoconline.club/hoat-dong-trai-nghiem-12-ct/">Giải sgk Hoạt động trải nghiệm 12 - CTST</a></li> <li><a href="https://hoconline.club/am-nhac-12-ct/">Giải sgk Âm nhạc 12 - CTST</a></li></ul> </div> </div> </div><div class="row"> </div></div> </div> </div> </div><div class="footer_ads"></div> <script type="text/javascript" src="../FrontEndWeb/js/sp.js"></script> <script type="text/javascript" src="/jvfrontend/javascript-v6.js?v=3"></script> <script type="text/javascript" src="../theme/js/custom-min.js"></script> <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-K2SNMM8" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript></body></html>