Form html là gì? Các phần tử form thường sử dụng trong website.

Form html là một công cụ rất hữu ích trong website giúp người dùng có thể tương tác với hệ thống bằng cách nhập liệu form và gửi lên server. Form được dùng trong việc lấy bình luận người dùng, đăng nhập, đăng ký, đặt hang…

Cấu trúc form

<form action="process.php" method="get">
    <!--Các phần tử form-->
</form>

Trong đó:

• <form> ... </form>: Thẻ khai báo một form.
• action: Thuộc tính khai báo đường dẫn xử lý dữ liệu sau khi người dùng submit form.
• method: Thuộc tính khai báo phương thức xử lý dữ liệu bao gồm POST và GET.

Lưu ý: Phần action và method qua nội dung php bạn sẽ được nắm rõ hơn để khai báo. Còn trong quá trình xây dựng html tạm thời bạn cứ để trống.

Các phần tử form thường dùng

Input text – nhập đoạn text ngắn

Đây là phần tử form dùng nhập text có số lượng ký tự ngắn như tên người dùng, địa chỉ, tiêu đề bài viết – sản phẩm…

Ví dụ bên dưới chúng ta tạo ra input nhập username

<form action="" method="">
    Username: <input type="text" name="username">
</form>

Input password – nhập mật khẩu

Để lập những thông tin cần bảo mật như mật khẩu trong form có type = "password" giúp chúng ta nhập thông tin một cách an toàn.

<form action="" method="">
    Password: <input type="password" name="password">
</form>

Input submit – gửi dữ liệu lên server

Khi đã nhập dữ liệu vào form để gửi nó lên server chúng ta cần khai báo input type = "submit". Khi người dùng nhấn vào nút submit dữ liệu sẽ được gửi lên server để xử lý.

Bên dưới là demo form đăng nhập bao gồm username, password, và một nút bấm đăng nhập.

<form action="" method="">
    Username: <input type="text" name="username"><br>
    Password: <input type="password" name="password"><br>
    <input type="submit" name="btn_login" value="Đăng nhập">
</form>

Input email – nhập địa chỉ email

Trong quá trình đăng ký tài khoản hoặc các form đăng ký nhận bản tin, giảm giá thì email là một phần không thể thiếu.

Để nhập liệu email chúng ta sử dụng input type = "email"

<form action="" method="">
    <input type="email" name="email">
</form>

Input date – nhập ngày tháng

<form action="" method="">
    <input type="date" name="birthday">
</form>

Textarea – nhập đoạn văn

Textarea thường dùng để nhập liệu đoạn văn dài như mô tả bài viết, nội dung bài viết, nội dung sản phẩm…

<form action="" method="">
    <textarea name="post_content" cols="30" rows="10"></textarea>
</form>

Trong đó

• cols: Độ rộng của ô nhập liệu
• rows: Độ cao của ô nhập liệu

Input number – nhập số lượng

Trong một số trường hợp dữ liệu nhập vào ở dạng số nguyên bạn có thể sử dụng type = "number". Phần này thường dùng trong chọn số lượng sản phẩm trong giỏ hàng.

<form action="" method="">
    <input type="number" name="num_order" min="1" value="1" max="10">
</form>

Trong đó

• min: Thuộc tính khai báo giá trị bé nhất của dữ liệu.
• max: Thuộc tính khai báo gía trị lớn nhất của dữ liệu.
• value: Thuộc tính khai báo giá trị mặc định.

Checkbox – hộp chọn nhiều

Trong trường hợp muốn khảo sát thông tin từ người dùng về một chủ đề có nhiều lựa chọn. Người dùng có thể chọn một hoặc nhiều option thì chúng ta sử dụng input = "checkbox".

Ví dụ bên dưới giúp người dùng khai báo kỹ năng của họ bao gồm html, css, php.

Lưu ý: Các checkbox có cùng một chủ đề bạn cần sử dụng có cùng giá trị của thuộc tính name

<form action="" method="">
    <input type="checkbox" name="skill" value="html"> Html<br>
    <input type="checkbox" name="skill" value="css"> Css<br>
    <input type="checkbox" name="skill" value="php"> Php<br>
</form>

Radiobox – hộp chọn một trong số

Khi muốn lấy thông tin của người dùng chỉ được chọn một trong số rất nhiều lựa chọn chúng ta sử dụng input type="radio".

Ví dụ bên dưới giúp người dùng chọn giới tính của mình.

<form action="" method="">
    <input type="radio" name="gender" value="male">Nam<br>
    <input type="radio" name="gender" value="female">Nữ<br>
</form>

Selectbox – chọn qua thanh xổ

Một chức năng thường dùng select chính là thanh chọn vị trí tỉnh/thành phố đang ở.

<form action="" method="">
    <select name="city">
        <option value="">Hà Nội</option>
        <option value="">Hải Phòng</option>
        <option value="">Đà Nẵng</option>
        <option value="">TP.HCM</option>
        <option value="">Tỉnh khác</option>
    </select>
</form>

Tổng kết

Trong bài này tôi đã giới thiệu với bạn về form html và những phần tử form thường dùng trong website. Đây là một nội dung quan trong nên bạn cần ghi chú lại và thực hành từng bước để nắm chắc bài học.

Xin chào, sớm hẹn gặp lại!

Phan Văn Cương và cộng sự

P/s: Nếu bạn gặp khó khăn hãy inbox cho tôi để được tư vấn!

Trước khi chúng ta gặp lại nhau, bạn có thể bấm vào đây để tải và đọc cuốn ebook chia sẻ về hành trình vượt qua khó khăn từng bước trở thành một web developer và giờ đây là người dẫn dắt đồng hành giúp hàng ngàn người có công việc thu nhập từ 8-50tr/tháng.

✌️ Tải ebook tại đây!

Hẹn gặp lại!