Bài 1: Giới thiệu về Trình quản lý quảng cáo

Bài trước Bài tiếp theo

BÀI GIẢNG: TÌM HIỂU CÁC THẺ DÙNG ĐỂ CHIA KHUNG VÀ FORM NHẬP LIỆU

1. Thẻ chia khung (<div>)

Thẻ <div> dùng để chia nội dung thành các khối khác nhau, giúp tổ chức trang web tốt hơn.

Cú pháp:

<div style="background-color: lightgray; padding: 10px;">
      Đây là một khối div
</div

Kết quả:

Đây là một khối div
(Khối div có nền màu xám nhạt và khoảng cách 10px.)

2. Thẻ tạo form nhập liệu (<form>)

Thẻ <form> được sử dụng để tạo biểu mẫu nhập liệu, giúp thu thập thông tin từ người dùng.

Cú pháp:

<form action="submit.html" method="post">
    <!-- Các phần tử nhập liệu sẽ được đặt ở đây -->
</form>

3. Thẻ nhập liệu (<input>)

Thẻ <input> được sử dụng để nhận thông tin từ người dùng, có nhiều kiểu khác nhau như text, email, password, number...

Cú pháp và ví dụ:

<label for="name">Họ và tên:</label>
<input type="text" id="name" name="name"><br>

<label for="email">Email:</label>
<input type="email" id="email" name="email"><br>

<label for="password">Mật khẩu:</label>
<input type="password" id="password" name="password"><br>

<label for="age">Tuổi:</label>
<input type="number" id="age" name="age"><br>

Kết quả:

Họ và tên: 
Email: 
Mật khẩu: 
Tuổi: 

4. Thẻ chọn danh sách (<select>)

Thẻ <select> giúp tạo danh sách chọn với các tùy chọn bên trong.

Cú pháp và ví dụ:

<label for="gender">Giới tính:</label>
<select id="gender" name="gender">
    <option value="male">Nam</option>
    <option value="female">Nữ</option>
</select><br>

Kết quả: 

5. Thẻ nhập văn bản dài (<textarea>)

Thẻ <textarea> cho phép người dùng nhập nhiều dòng văn bản.

Cú pháp và ví dụ:

<label for="notes">Ghi chú:</label>
<textarea id="notes" name="notes" rows="4" cols="50"></textarea><br>

Kết quả: 

6. Tổng kết

Trong bài này, chúng ta đã tìm hiểu cách sử dụng thẻ <div> để chia khung và các thẻ tạo form nhập liệu như <form>, <input>, <select>, và <textarea>. Những thẻ này giúp tạo ra bố cục linh hoạt và tương tác cho trang web.

CODE BÀI GIẢNG

<!DOCTYPE html>
<html lang="vi">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <form action="#" method="get">
        <!-- Text: Nhập văn bản - mặc định -->
        <p>
            <label for="name">Họ và tên:</label>
            <input type="text" name="vanban" value="" placeholder="Nhập họ và tên" />
        </p>
        <p>
            <!-- number: Nhập số -->
            <label for="name">Số tuổi:</label>
            <input type="number" name="so" min="0" max="100" step="5" value="50" />
        </p>
        <p>
            <!-- date: Nhập ngày -->
            <label>Ngày sinh</label>
            <input type="date" name="ngay" value="2025-05-23" />
        </p>
        <p>
            <!-- datetime-local: Nhập ngày và giờ -->
            <label>Giờ làm việc</label>
            <input type="datetime-local" name="thoigian" value="2025-05-23T23:15" />
        </p>
        <p>
            <!-- email: email -->
            <label>Email</label>
            <input type="email" name="email" value="" placeholder="Nhập email" />
        </p>
        <p>
            <!-- password: Nhập mật khẩu -->
            <label>Mật khẩu</label>
            <input type="password" name="matkhau" value="" placeholder="Nhập password" />
        </p>
        <p>
            <!-- file: Chọn file tài liệu trên máy tính -->
            <label >Ảnh đại diện</label>
            <input type="file" name="tep" accept=".png" />
        </p>
        <p>
            <!-- range: Chọn một số trong dải số -->
            <label>Số chỗ ngồi</label>
            <input type="range" name="soluachon" min="0" max="100" step="5" value="50" />
        </p>
        <p>
            <!-- Color: chọn màu sắc -->
            <label>Màu ghế</label>
            <input type="color" name="mausac" value="#0000FF" />
        </p>
        <p>
            <!-- Một số input dạng lựa chọn -->
            <label>Loại khách mới</label>
            <input type="checkbox" name="check" value="check1" />  Theo vé
            <input type="checkbox" name="check" value="check2" />  Đại diện doanh nghiệp
            <input type="checkbox" name="check" value="check3" />  Ưu tiên hàng đầu
        </p>
        <p>
            Giới tính
            <input type="radio" value="nam" name="gioitinh" /> Nam
            <input type="radio" value="nữ" name="gioitinh" /> Nữ
        </p> 

        <!-- Thẻ nhiều lựa chọn -->
        <p>
            <label >Thành phố</label>
            <select name="thanhpho"  >
                <option value="hanoi">Hà Nội</option>
                <option value="hcm">Hồ Chí Minh</option>
                <option value="dn">Đà Nẵng</option>
            </select>
        </p>
        <p>
            <label>Mô tả về khách mời</label>
            <textarea name="mota" rows="5" cols="1">Mô tả: ....</textarea>
        </p>


        <p>
            <button>Gửi</button>
        </p>
    </form>
</body>
</html>

 

Bài tập: Thực hành tạo form nhập sản phẩm bất động sản

1. Lập trình để có kết quả như hình sau

 (Hình minh họa kết quả trang web, gồm: Tiêu đề, ảnh, video, audio, div bố cục, và bảng dữ liệu)

Gửi nộp file code