12_Lesson12,13.kntt

​Tạo biểu mẫu

​1. Biểu mẫu web

-Biểu mẫu web (phần tử form) của HTML là một công cụ dùng để thu thập dữ liệu.

-Dữ liệu được người dùng nhập vào form và xử lí tại chỗ (gửi về máy chủ).

-Ta thường xuyên gặp các biểu mẫu (form) khi đăng kí tài khoản, mua hàng, tìm kiếm thông tin,...

-Biểu mẫu web đầy đủ có hai thành phần:

• Thành phần thứ nhất là biểu mẫu hiển thị trên web được tạo thành bởi các đoạn mã HTML.

• Thành phần thứ hai là các ứng dụng hoặc script xử lí dữ liệu, thường nằm trên máy chủ. 

​Tạo biểu mẫu

​1. Biểu mẫu web

Dễ quan sát thấy các biểu mẫu web hoặc thành phần của nó được dùng cho nhiều mục đích khác nhau.

Sử dụng biểu mẫu web để nhập thông tin tài khoản, thường thấy trên các hệ thống cần tài khoản để truy cập dữ liệu.

​Tạo biểu mẫu

​1. Biểu mẫu web

Biểu mẫu giúp người dùng tìm kiếm video.



Mục bình luận trên mạng xã hội cũng là một ví dụ về biểu mẫu.





Biểu mẫu web được tạo bởi thẻ <form> có cấu trúc chung sau:

<form> các phần tử của biểu mẫu </form>

Các phần tử của biểu mẫu được dùng có thể là phần tử nhận dữ liệu hoặc phần tử hiển thị thông tin.

Multiple Choice

Thẻ nào sau đây dùng để tạo biểu mẫu?

• <form>

• <input>

• <docs>

• <label>

​Tạo biểu mẫu

2. Một số thành phần của biểu mẫu

-Các phần tử của biểu mẫu thường dùng là: input, label, select, textarea; ngoài ra còn có các phần tử khác như fieldset, legend, datalist,...
🔹 Phần tử label định nghĩa nhãn, có cấu trúc như sau:

<label for="mã_định_danh_của_input_tương_ứng"> tên_nhãn <label>

-Khi nháy chuột vào tên_nhãn, con trỏ chuột sẽ được đưa vào vùng của phần tử input được xác định bởi thuộc tính for tương ứng.

​Tạo biểu mẫu

2. Một số thành phần của biểu mẫu

🔹Phần tử input (là một thẻ đơn) xác định vùng nhập dữ liệu có cấu trúc như sau:

<input id="mã_định_danh" type="loại_input" name="tên_input">

Trong đó:

• Thuộc tính name: được sử dụng cho input khi thực hiện xử lí. Nghĩa là, tên_input được sử dụng để tham chiếu tới dữ liệu đã nhập khi thực hiện tính toán hay gửi tới máy chủ.

• Thuộc tính type: xác định loại dữ liệu mà phần tử input chứa. 

Lưu ý: Phần tử input chỉ dùng để nhập dữ liệu, muốn có thông tin về nội dung nhập phải tạo kèm label. 

​Tạo biểu mẫu

2. Một số thành phần của biểu mẫu

​Tạo biểu mẫu

2. Một số thành phần của biểu mẫu

🔹Phần tử select có tác dụng cho phép người dùng chọn một trong các lựa chọn trong danh sách thả xuống. Mỗi phần tử trong danh sách được định nghĩa bằng thẻ option. Cấu trúc phần tử select như sau:

<select id="mã_định_danh" name="tên_select"> 
      <option value="giá_trị"> giá_trị_lựa_chọn</option>
      ....
</select>

​Tạo biểu mẫu

2. Một số thành phần của biểu mẫu

🔹Phần tử textarea xác định một vùng nhập văn bản có nhiều dòng và cột. Cấu trúc của phần tử textarea như sau:

<textarea id="mã_định_danh" name="tên_textarea" rows="số_dòng" cols="số_cột">Nội_dung<textarea>

Lưu ý: Phần nội_dung được hiển thị trong vùng nhập, nếu không để nội_dung trong thẻ, vùng nhập văn bản là vùng trắng.

🔹Phần tử fieldset được dùng để nhóm các phần tử có liên quan trong biểu mẫu bằng cách vẽ một hình chữ nhật bao quanh các phần tử đặt trong cặp thẻ <fieldset>...</fieldset>. Ta có thể thêm tên cho nhóm phần tử bằng cách đặt phần tử legend trong phần tử fieldset tương ứng.

Multiple Choice

Phát biểu nào sau đây là SAI khi so sánh radio và checkbox?

• Checkbox cho phép chọn nhiều mục, radio chỉ chọn một.

• Checkbox không cần cùng nhóm phải có cùng tên.

• Checkbox ít dùng cho các lựa chọn có tính loại trừ nhau.

• Checkbox không cần thuộc tính value, radio bắt buộc có.

Multiple Choice

Thuộc tính nào của thẻ <input> được sử dụng để xác định loại dữ liệu mà phần tử input chứa?

• id

• name

• type

• value

Multiple Choice

Thẻ nào được sử dụng để nhóm các phần tử có liên quan trong biểu mẫu?

• <fieldset>

• <legend>

• <label>

• <select>

Multiple Choice

Thẻ <label> thường được sử dụng để:

• Nhập dữ liệu

• Nhóm phần tử

• Định nghĩa nhãn cho phần tử input

• Hiển thị các lựa chọn

Multiple Choice

Để tạo một danh sách thả xuống cho phép người dùng chọn một trong các lựa chọn, thẻ nào được sử dụng?

• <input>

• <label>

• <select>

• <textarea>

Multiple Choice

Khi sử dụng thẻ <input> với type="radio", mục đích của nó là để:

• Cho phép chọn nhiều tùy chọn

• Cho phép chọn một tùy chọn duy nhất trong một nhóm

• Nhập dữ liệu dạng chữ

• Nhập dữ liệu dạng số

Multiple Choice

Để tạo một trường nhập dữ liệu cho số, thẻ <input> nên sử dụng thuộc tính nào?

• type="number"

• type="text"

• type="date"

• type="checkbox"

Multiple Choice

Thẻ nào không hỗ trợ thuộc tính width và height?

• <video>

• <audio>

• <img>

• <iframe>

Multiple Choice

Thuộc tính nào của thẻ <input> không phải là thuộc tính chính để xác định dữ liệu nhập vào?

• id

• name

• type

• value

Multiple Choice

Để tạo một nút gửi thông tin trong biểu mẫu, thẻ <input> nên sử dụng thuộc tính nào?

• type="text"

• type="reset"

• type="button"

• type="submit

​Khái niệm, vai trò của CSS

​1. Khái niệm mẫu định dạng CSS

Khi xem mã nguồn (văn bản) của các trang web, em sẽ bắt gặp một số đoạn mã có dạng như dưới đây. 

Ví dụ mẫu định dạng

Những đoạn mã này được gọi là mẫu định dạng (Cascading Style Sheet, gọi tắt là CSS).

Mẫu định dạng được viết độc lập với mã nguồn của trang web và dùng để định dạng phần tử HTML tương ứng.

Nhờ có CSS mà hạn chế số lần thiết lập các nội dung có cùng định dạng.

CSS là định dạng độc lập với chuẩn HTML, được dùng để thiết lập các mẫu định dạng dùng trong trang web.

Multiple Choice

Mẫu định dạng được dùng để làm gì sau đây?

• Định dạng nội dung của thẻ HTML.

• Định dạng kiểu sử dụng thẻ HTML.

• Định dạng hình ảnh trên trang web.

• Định dạng cấu trúc của mã HTML.

Multiple Choice

CSS viết tắt của từ nào trong tiếng Anh?

• Cascading Style Sheets

• Cascading Script Sheets

• Color Style Sheets

• Cascading Style Systems

​Khái niệm, vai trò của CSS

2. Cấu trúc CSS

-Một mẫu định dạng CSS có hai phần: bộ chọn (selector) và vùng mô tả (declartion block).

-Vùng mô tả gồm nhiều quy định, mỗi quy định (là một cặp thuộc tính: giá trị) ngăn cách nhau bởi dấu chấm phẩy ";".

​Khái niệm, vai trò của CSS

2. Cấu trúc CSS

Dưới đây là một số ví dụ về sử dụng mẫu định dạng.

🔷Thiết lập màu chữ đỏ cho các bộ chọn là tất cả các thẻ <h1>.

🔷Thiết lập thụt lề dòng đầu và chữ màu xanh áp dụng cho tất cả các thẻ <p>.

🔷Thiết lập màu chữ đỏ cho các thẻ <h1>, <h2>, <h3>.

​Khái niệm, vai trò của CSS

2. Cấu trúc CSS

a. Thiết lập CSS trong (internal CSS)

Cách thiết lập này đưa toàn bộ các mẫu định dạng vào bên trong thẻ <style> và đặt trong phần tử head của tệp HTML.

Cách thiết lập CSS trong chỉ được áp dụng cho tệp HTML hiện thời.
b. Thiết lập CSS ngoài (external CSS)

Các mẫu định dạng CSS được viết trong một tệp CSS, bên ngoài tệp HTML. Tập css này sẽ bao gồm các mẫu định dạng như đã mô tả ở trên, theo ngôn ngữ CSS. Sau đó, cần thực hiện thao tác kết nối, liên kết tập HTML với tệp định dạng CSS.

​Khái niệm, vai trò của CSS

2. Cấu trúc CSS

b. Thiết lập CSS ngoài (external CSS)

-Tệp styles.css sau là ví dụ cách thiết lập tệp CSS ngoài. Các dòng chú thích dưới dạng / ....... / và có thể trên nhiều dòng.
1️⃣Sử dụng thẻ link đặt trong vùng head của trang web, ví dụ:

2️⃣Sử dụng lệnh @import trong phần tử style và nằm trong phần head của trang web, ví dụ:

​Khái niệm, vai trò của CSS

2. Cấu trúc CSS

b. Thiết lập CSS ngoài (external CSS)

Một tệp CSS có thể được thiết lập để đồng thời áp dụng cho nhiều trang web, giúp cho việc định dạng nhiều trang web thống nhất và khi cần chỉnh sửa định dạng thì chỉ cần sửa một lần trong tập định dạng css.

c. Thiết lập CSS nội tuyến (inline CSS)

Có thể định dạng CSS trực tiếp bên trong thẻ của các phần tử HTML bằng cách chỉ ra các thuộc tính và giá trị cho thuộc tính style. Cách làm này mất thời gian nhưng thời gian thực hiện sẽ nhanh.

Multiple Choice

Phương án nào sau đây là lợi ích của việc sử dụng tệp CSS ngoài?

• Chỉ áp dụng định dạng cho một thẻ duy nhất.

• Giảm dung lượng lưu trữ của tệp siêu văn bản.

• Hạn chế việc áp dụng định dạng cho các trang.

• Áp dụng định dạng đồng thời nhiều trang web.

Multiple Choice

Đoạn mã nào sau đây chèn tệp CSS ngoài vào trang HTML?

• <script rel="stylesheet" href="styles.css">

• <css rel="stylesheet" href="styles.css">

• <link rel="stylesheet" href="styles.css">

• <style src="styles.css">style.css</style>

Multiple Choice

Một trong những lợi ích của việc sử dụng tệp CSS ngoài là

• dễ dàng cập nhật định dạng sau khi sửa đổi.

• giảm khả năng tái sử dụng các mã định dạng.

• hạn chế số tệp tin văn bản cần được sử dụng.

• chỉ áp dụng định dạng cho một thẻ duy nhất.

​Khái niệm, vai trò của CSS

3. Vai trò, ý nghĩa của CSS

CSS giúp định dạng nội dung trang web một cách nhanh chóng và đồng nhất. Định dạng trở nên khoa học, thuận tiện và chuyên nghiệp hơn.

Tách biệt nội dung HTML và định dạng làm giảm khối lượng công việc nhập nội dung.

CSS cho phép viết các mẫu định dạng trong phần head của trang HTML hoặc tệp CSS ngoài, áp dụng cho nhiều phần tử hoặc trang web. Điều này làm cho việc thay đổi định dạng trở nên dễ dàng và hiệu quả. 

Multiple Choice

CSS giúp giảm khối lượng công việc bằng cách nào sau đây?

• Tạo nhiều mẫu định dạng phức tạp.

• Giảm số lượng tệp HTML cần thiết.

• Tăng số lượng trang web.

• Tách biệt nội dung và định dạng.

Multiple Choice

Số cách để thiết lập CSS cho tệp HTML là

• 2

• 3

• 4

• 5

Multiple Choice

Một phát biểu SAI về vai trò của CSS đối với trang web là

• giúp trang web hoạt động nhanh hơn.

• giảm thiểu thời gian sửa đổi định dạng.

• hỗ trợ định dạng nội dung trang web.

• tối ưu số lần áp dụng mẫu định dạng.

Multiple Choice

Chức năng của CSS đối với trang web là

• cố định vị trí của phần tử HTML.

• mã hóa nội dung của thẻ HTML.

• làm tăng tốc độ của trang web.

• định dạng nội dung trang web.

Multiple Choice

Thẻ nào sau đây dùng để liên kết một tệp CSS đến tệp HTML?

• <style>

• <link>

• <meta>

• <css>

Multiple Choice

Một ví dụ đúng về khai báo bộ chọn là

• p{color:red;}

• p{red:color;}

• p{color;red;}

• p{color:red,}

Multiple Choice

Một ví dụ về các bộ chọn có chung vùng mô tả (quy tắc định dạng) là

• b. p. i {color: white; font-size: 6px;}

• b, p, i {color: white; font-size: 6px;}

• b, p, i {color: white. font-size: 6px.}

• b, p, i {color: white, font-size: 6px,}

Multiple Choice

Một ví dụ đúng về khai báo bộ chọn có nhiều vùng mô tả (quy tắc định dạng) là

• p {color: green: font-size: 15px:}

• p {color: green. font-size: 15px.}

• p {color: green; font-size: 15px;}

• p {color: green, font-size: 15px,}

Multiple Choice

Một ví dụ về cách khai báo nhiều bộ chọn có cùng vùng mô tả (quy tắc định dạng) là

• p. span {color: black}

• p span: {color: black}

• p; span {color: black}

• p, span {color: black}

Multiple Choice

Phần mở rộng của tệp chứa các bộ chọn là

• *.des

• *.css

• *.ext

• *.html

Multiple Choice

Đoạn mã nào sau đây là ví dụ về CSS với nhiều quy định trong vùng mô tả?

• h1 {color: red;}

• a {font-size: 14px;}

• div {background: yellow;}

• p {text-indent: 15px; color: blue;}

Multiple Choice

Cách nào không phải là một cách thiết lập CSS?

• CSS trong

• CSS ngoài

• CSS nội tuyến

• CSS tích hợp

Multiple Choice

Để kết nối tệp CSS với tệp HTML, bạn có thể sử dụng thẻ nào trong phần <head>?

• <script>

• <style>

• <link>

• <import>

Multiple Choice

Cấu trúc của một mẫu định dạng CSS đơn giản nhất bao gồm phần nào?

• Chỉ bộ chọn

• Chỉ vùng mô tả

• Bộ chọn và vùng mô tả

• Bộ chọn, vùng mô tả và thuộc tính

Multiple Choice

Cách nào cho phép định dạng CSS trực tiếp trong các phần tử HTML?

• CSS trong

• CSS ngoài

• CSS liên kết

• CSS nội tuyến

Multiple Choice

Nếu bạn muốn định dạng tất cả các thẻ <h1>, <h2>, và <h3> cùng một lúc, bạn nên viết CSS như thế nào?

• h1, h2, h3 {color: red;}

• h1 h2 h3 {color: red;}

• h1 h2, h3 {color: red;}

• h1 h2 h3 {color: red;}

Multiple Choice

Mẫu định dạng nào dưới đây là CSS nội tuyến?

• <link rel="stylesheet" href="styles.css">

• <style> p {color: green;} </style>

• h1 {color: green;}

• <p >Text</p>

Multiple Choice

Tại sao việc sử dụng CSS có lợi hơn việc định dạng HTML trực tiếp?

• CSS không cần phải viết mã

• CSS không hỗ trợ đa dạng kiểu định dạng

• CSS làm cho trang web không cần thiết phải định dạng

• CSS giúp tách nội dung và định dạng, giảm công việc và tăng tính đồng nhất