Thẻ form trong HTML

  • Khái niệm form HTML
  • Tạo form HTML đầu tiên
  • Các phần tử của form
  • Thẻ <input>
  • Thẻ <textarea>
  • Thẻ <button>

Khái niệm web form

Biểu mẫu – web form – được tạo ra trong HTML là khu vực hình thành nên sự tương tác giữa người dùng và ứng dụng web. Các form cho phép người dùng nhập dữ liệu vào, sau đó gửi dữ liệu đó cho web server, hoặc nhập dữ liệu vào sử lý dữ liệu ngay tại client side.

Các form được tạo ra bằng thẻ <form>, trong đó nó chứa các phần tử để nhập liệu gọi là các điều khiển (control), có nhiều loại điều khiển như:

Chủ Đề Bài Viết: Form trong html

  • Điều khiển nhập một dòng text:
  • Điều khiển cho nhập nhiều dòng text:
  • Điều khiển là các nút bấm: Bấm vào đây
  • Các phần tử checkbox (hộp chọn): Đã học HTML Đã học CSS
  • Các phần tử radio (chọn một): Nam Nữ

Hầu hết các control được tạo ra bằng phần tử là <input> đi cùng phần tử <lable> để tạo ra nhãn (tiêu đề) cho control.

Thẻ <form>, tạo web form đầu tiên

Để tạo ra HTML Form thì dùng đến thẻ <form>, sau đó nội dung trong thẻ trình bày các HTML và các phần tử là điều khiển (control) có trong form.

<form action=”http://xuanthulab.net/” method=”post”> <!-Các mã HTML, các phần tử trong form -> </form>

Thẻ <form> cơ bản có hai thuộc tính cần lưu tâm là action và method:

  • action thuộc tính để thiết lập URL, là địa chỉ mà dữ liệu của form gửi đến (submit đến, post đến). Thiếu tham số này thì action bằng URL đang truy cập.
  • method thuộc tính để thiết lập HTTP Method, xem thêm HTTP Request Message thường có giá trị bằng get hoặc post.

    Sử dụng method=”get” thì khi submit dữ liệu được biểu diễn thông qua URL. Sử dụng method=”post” thì khi submit biểu diễn trong nội dung của Request gửi đến Server và là ẩn với người dùng, sử dụng post an toàn hơn.

Khi thông tin gửi tới địa chỉ máy chủ (tham số action), thì dự liệu nhận được xử lý thế nào là việc của server, bạn sẽ thực hiện việc sử lý này khi lập trình backend với một ngôn ngữ lập trình nào đó như php, c# …

Xem Thêm: Hướng dẫn làm mồi câu cá rô đồng cực nhạy

Để submit (gửi) form, thường tạo ra một nút bấm từ phần tử <input> và chỉ ra type=”submit”, thì nó sẽ tạo ra nút bấm, khi bấm vào đó dữ liệu form sẽ gửi đi. Ví dụ:

<input type=”submit” name=”submit” value=”Gửi” />

Ví dụ tạo form

Ví dụ form sau yêu cầu người dùng điền tên đăng nhập, password và bấm vào nút Đăng nhập để gửi đi.

<form action=”http://xuanthulab.net” method=”get”> <label>Tên đăng nhập:</label><br> <input name=”name” type=”text” value=””><br> <label>Mật khẩu:</label><br> <input name=”pass” type=”password” value=””><br> <input type=”submit” name=”submit” value=”Đăng Nhập” /> </form> form

Giả sử bạn nhập vào tên là test, mật khẩu là abc thì với form sử dụng phương thức get, nên bấm vào đăng nhập thì thông tin sẽ mô tả bởi URL và nhìn vào thanh địa chỉ trình duyệt sẽ có dạng

https://xuanthulab.net/?name=test&pass=abc&submit=Đăng+Nhập

Bạn thấy các dữ liệu trong thẻ input đã được biểu diễn bằng URL với tên dữ liệu tương ứng với tên của input là: name, pass, submit

Trong trường hợp bạn chọn method là post thì sẽ không nhìn thấy dữ liệu biểu diễn qua URL như thế này mà dữ liệu được tích hợp vào dữ liệu Request.

Các phần tử trong FORM

Các phần tử trong FORM là nơi mà người dụng nhập dữ liệu, lựa chọn dữ liệu, các phần tử dữ liệu hay dùng trong form có thể kể đến là: <input> <textarea> <select> <button> <datalist> <label> <fieldset> <datalist>

Xem Thêm: JISOO THÍCH MÀU GÌ

Mỗi phần tử là control của form để người dùng nhập dữ liệu thì phần tử đó cần có thuộc tính name là tên loại dữ liệu cần nhập, tên này được submit kèm dữ liệu

Thẻ <input>

Thẻ input là thẻ cơ bản trong form, thẻ này tạo ra các loại điều khiển tùy vào thuộc tính type

Thẻ input chỉ có phần mở thẻ.

Trong form người ta cũng thường dùng thẻ label để cho biết tiêu đề của một thẻ input

Sau đây là một số type hay dùng:

thuộc tính type Ý nghĩa type=”text” Hộp nhập liệu một dòng <form> Họ:<br> <input type=”text” name=”firstname”><br> Tên:<br> <input type=”text” name=”lastname”> </form> Họ: Tên: type=”password” Hộp nhập password <form> Tên:<br> <input type=”text” name=”username”><br> Mật khẩu:<br> <input type=”password” name=”psw”> </form> Tên: Mật khẩu: type=”submit” Tạo nút bấm gửi form <form action=”url”> Nhập số:<br> <input type=”text” name=”number” value=”2017″> <input type=”submit” value=”Submit”> </form> Nhập số: type=”reset” Tạo nút bấm – đưa dữ liệu đang nhập trên form về mặc định type=”radio” Tạo lựa chọn <form> <input type=”radio” name=”gioitinh” value=”Nam” checked> Nam<br> <input type=”radio” name=”gioitinh” value=”Nữ”> Nữ<br> <input type=”radio” name=”gioitinh” value=”Khác”> Khác </form> Nam Nữ Khác type=”checkbox” Tạo lựa chọn hộp kiểm (chọn nhiều phương án) <form> <input type=”checkbox” name=”love1″ value=”LovePHP”> Tôi thích PHP<br> <input type=”checkbox” name=”love1″ value=”LoveHTML”> Tôi thích HTML </form> Tôi thích PHP Tôi thích HTML type=”color” Tạo điều khiển chọn màu sắc type=”date” Tạo điều khiển chọn ngày tháng type=”email” Tạo điều khiển nhập email type=”file” Tạo điều khiển chọn file upload type=”time” Tạo điều khiển nhập giờ type=”url” Tạo điều khiển nhập địa chỉ URL

Thẻ <textarea>

Thẻ textarea tạo ra một hộp nhập dữ liệu dạng text có nhiều dòng. Có thuộc tính col độ rộng và row số dòng.

<textarea name=”info” rows=”5″ cols=”30″> Tôi đang học HTML </textarea> Tôi đang học HTML

Thẻ <button>

Tạo các nut bấm như trên có thể dùng <input> với type bằng submit, reset. Thì bạn cũng có thể dùng phần tử <button> với type bằng submit hoặc reset.

Xem Thêm: Túi xách Hermes Kelly: Chiếc túi xách đáng đầu tư nhất của nhà Hermes

<button type=”submit”>Gửi thông tin</button> Gửi thông tin

Leave a Reply

Your email address will not be published.