Ngày 5: Xây dựng Form HTML Đơn Giản Đầu Tiên

Chào mừng bạn đến với Ngày 5,

Tôi là Dhanian. Cho đến nay, các trang web của bạn chỉ là một con đường một chiều: bạn cung cấp thông tin và người dùng đọc nó. Nhưng những phần mạnh mẽ nhất của web là tương tác. Chúng cho phép người dùng phản hồi - tìm kiếm, đăng nhập, bình luận, mua hàng.

Hôm nay, bạn sẽ học cách bắt đầu cuộc trò chuyện đó. Chúng ta sẽ xây dựng các form HTML. Các form là cầu nối giữa người dùng và chức năng của trang web của bạn. Chúng được tạo ra bằng các thẻ, mỗi thẻ được thiết kế cho một loại đầu vào cụ thể.

Nền Tảng: Phần Tử `<form>`

Nó là gì: Phần tử <form> là một container cho tất cả các phần tử đầu vào mà bạn muốn thu thập dữ liệu. Nó định nghĩa nơi dữ liệu của người dùng sẽ được gửi và cách thức gửi.

Các thuộc tính chính:

action: Thuộc tính này chỉ định URL nơi dữ liệu form sẽ được gửi để xử lý. Thông thường, đây là một script phía máy chủ (viết bằng PHP, Node.js, Python, v.v.). Hiện tại, trong khi học, chúng ta có thể đặt nó thành "#", có nghĩa là "gửi đến trang này."
method: Điều này xác định phương thức HTTP được sử dụng để gửi dữ liệu. Hai phương thức phổ biến nhất là:
- GET: Gắn dữ liệu form vào URL (hiện rõ với người dùng). Tốt cho các form tìm kiếm.
- POST: Gửi dữ liệu form trong thân của yêu cầu HTTP (không hiển thị trong URL). Tốt cho các form đăng nhập, đăng ký, hoặc bất kỳ hành động nào thay đổi dữ liệu.

html Copy

<form action="#" method="POST">
  <!-- Tất cả các trường đầu vào sẽ nằm trong đây -->
</form>

Các Khối Xây Dựng: Các Phần Tử Đầu Vào (`<input>`)

Thẻ <input> là phần tử form linh hoạt nhất. Hành vi của nó thay đổi đáng kể dựa trên thuộc tính type.

1. Đầu Vào Văn Bản (`type="text"`)

Trường văn bản một dòng tiêu chuẩn cho các thứ như tên, tên người dùng hoặc truy vấn tìm kiếm.

name: Điều này rất quan trọng. Nó là khóa xác định dữ liệu khi nó được gửi đến máy chủ.
placeholder: Hiển thị văn bản gợi ý bên trong trường mà biến mất khi người dùng bắt đầu nhập.

html Copy

<label for="username">Tên người dùng:</label>
<input type="text" id="username" name="username" placeholder="Nhập tên người dùng của bạn">

2. Đầu Vào Email (`type="email"`)

Một trường văn bản chuyên biệt cho địa chỉ email. Trên các thiết bị di động, nó thường hiển thị bàn phím tối ưu hóa cho email. Một số trình duyệt cũng sẽ thực hiện xác thực cơ bản để kiểm tra sự hiện diện của ký tự "@".

html Copy

<label for="user-email">Email:</label>
<input type="email" id="user-email" name="user_email" placeholder="your.email@example.com">

3. Đầu Vào Mật Khẩu (`type="password"`)

Ẩn đầu vào của người dùng bằng các dấu chấm hoặc dấu sao để bảo mật.

html Copy

<label for="user-password">Mật khẩu:</label>
<input type="password" id="user-password" name="user_password" placeholder="Tạo mật khẩu mạnh">

4. Nút Gửi (`type="submit"`)

Nút này gửi dữ liệu form đến URL được chỉ định trong thuộc tính action của form. Thuộc tính value đặt văn bản hiển thị trên nút.

html Copy

<input type="submit" value="Đăng Ký">
<!-- Bạn cũng có thể sử dụng một phần tử <button>, linh hoạt hơn -->
<button type="submit">Đăng Ký</button>

Bạn Đồng Hành Cần Thiết: Phần Tử `<label>`

Tại sao nó quan trọng: Một <label> định nghĩa nhãn cho một trường form. Nhấp vào văn bản nhãn sẽ tập trung (chọn) trường đầu vào tương ứng, điều này đặc biệt hữu ích cho các nút radio, checkbox và người dùng trên thiết bị cảm ứng. Nó cũng rất quan trọng cho các thiết bị đọc màn hình.

Cách sử dụng: Sử dụng thuộc tính for trên <label> và đặt giá trị của nó để khớp với thuộc tính id của <input> liên quan. Điều này liên kết chúng một cách rõ ràng.

html Copy

<label for="fname">Họ và Tên:</label>
<input type="text" id="fname" name="first_name">

Kết Hợp Tất Cả: Một Form Đăng Ký

Hãy kết hợp các thành phần này thành một form hoàn chỉnh và chức năng.

html Copy

<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <title>Ngày 5: Tham Gia Cộng Đồng Chúng Tôi</title>
</head>
<body>

    <h1>Tạo Tài Khoản Của Bạn</h1>
    <p>Vui lòng điền vào form này để đăng ký với chúng tôi.</p>

    <form action="#" method="POST">

        <p>
            <label for="full-name">Họ và Tên:</label><br>
            <input type="text" id="full-name" name="full_name" placeholder="vd: Alex Johnson" required>
        </p>

        <p>
            <label for="email">Địa Chỉ Email:</label><br>
            <input type="email" id="email" name="email" placeholder="username@domain.com" required>
        </p>

        <p>
            <label for="pwd">Mật khẩu:</label><br>
            <input type="password" id="pwd" name="user_password" placeholder="Ít nhất 8 ký tự" required>
        </p>

        <p>
            <button type="submit">Đăng Ký Ngay</button>
        </p>

    </form>

</body>
</html>

Giải thích: Chúng ta đã bọc từng cặp nhãn-đầu vào trong một thẻ đoạn <p> để tạo khoảng cách cơ bản. Thuộc tính required là một công cụ xác thực HTML đơn giản ngăn chặn việc gửi form nếu trường bị trống. Lưu ý rằng mỗi <input> có một id duy nhất và một name mô tả.

Thách Thức Ngày 5 của Bạn:

Tạo một tập tin mới có tên form.html.
Xây dựng form của riêng bạn. Đừng chỉ sao chép ví dụ; hãy gõ nó ra và tùy chỉnh. Ý tưởng:
- Một form liên hệ (Tên, Email, Tin nhắn).
- Một form đăng ký nhận bản tin (Chỉ Email và Gửi).
- Một form phản hồi (Tên, Đánh giá, Bình luận).
Phải bao gồm:
- Một phần tử <form> với action="#" và method="POST".
- Tối thiểu ba loại <input> khác nhau (ví dụ: text, email, password).
- Một <label> cho mỗi đầu vào, được liên kết đúng cách bằng cách sử dụng thuộc tính for và id.
- Một nút gửi (<input type="submit"> hoặc <button type="submit">).
- Sử dụng thuộc tính placeholder để cung cấp gợi ý cho người dùng.
Kiểm tra nó! Mở tập tin form.html của bạn trong trình duyệt. Thử nhấp vào các nhãn - bạn nên thấy trường đầu vào tương ứng được chọn. Thử gửi form (trang sẽ làm mới, điều này là mong đợi vì action="#" gửi nó trở lại trang này). Đây là nền tảng. Sau này, chúng ta sẽ học cách xử lý dữ liệu này.

Bạn vừa xây dựng giao diện front-end cho tương tác người dùng. Đây là một viên đá nền tảng của phát triển web. Hãy tự hào với bước này.

Tiếp tục xây dựng. Hẹn gặp bạn vào Ngày 6.

Các form chỉ là khởi đầu cho sự tương tác của người dùng. Để học cách tạo kiểu cho chúng bằng CSS, xác thực dữ liệu và kết nối chúng với máy chủ bằng JavaScript, bạn cần một hướng dẫn toàn diện. "Cẩm Nang Nhà Phát Triển Full-Stack Toàn Diện" bao gồm tất cả những điều này và hơn thế nữa, cung cấp kiến thức từ đầu đến cuối mà bạn đang hướng tới.

https://codewithdhanian.gumroad.com/l/gzjvj

— Dhanian

Ngày 5: Xây dựng Form HTML Đơn Giản Đầu Tiên

Ngày 5: Xây dựng Form HTML Đơn Giản Đầu Tiên

Nền Tảng: Phần Tử <form>

Các Khối Xây Dựng: Các Phần Tử Đầu Vào (<input>)

1. Đầu Vào Văn Bản (type="text")

2. Đầu Vào Email (type="email")

3. Đầu Vào Mật Khẩu (type="password")

4. Nút Gửi (type="submit")

Bạn Đồng Hành Cần Thiết: Phần Tử <label>

Kết Hợp Tất Cả: Một Form Đăng Ký

Thách Thức Ngày 5 của Bạn:

Bình luận

Nền Tảng: Phần Tử `<form>`

Các Khối Xây Dựng: Các Phần Tử Đầu Vào (`<input>`)

1. Đầu Vào Văn Bản (`type="text"`)

2. Đầu Vào Email (`type="email"`)

3. Đầu Vào Mật Khẩu (`type="password"`)

4. Nút Gửi (`type="submit"`)

Bạn Đồng Hành Cần Thiết: Phần Tử `<label>`