Form trong HTML

  • Nguyễn Lê Điệp
  • 05-01-2017
  • 270
  • 0
  • 1
  • 0
  • Bài viết được đăng tại kennis.vn - không copy dưới mọi hình thức.

    Phần tử form

    Phần tử form trong HTML được sử dụng để thu thập những dữ liệu của người dùng nhập vào. Sau đây là cú pháp của một form trong HTML
    <form>
    Đây là cú pháp của một form
    </form>
    Bên trong phần tử form có nhiều loại để nhận đầu vào từ người dùng như: Nhận văn bản, các nút check, các nút radio...

    Phần tử input

    Phần tử input là một hình thức nhận dữ liệu từ người dùng quan trọng nhất. Nó có thể được hiển thị bằng nhiều cách khác nhau, tùy thuộc vào thuộc tính của chúng.

    Kiểu input Mô tả
    <input type="text"> Xác định người dùng nhập vào là một dòng văn bản
    <input type="radio"> Xác định sự lựa chọn duy nhất trong nhiều lựa chọn
    <input type="submit"> Xác định nút gửi biểu mẫu lên server.

    Kiểu văn bản


    <input type="text"> - Xác định người dùng nhập vào là một dòng văn bản. Và số ký tự tối đa cho kiểu văn bản này là 20 ký tự.
    <form>
      Họ:<br>
      <input type="text" name="ho">
      <br>
      Tên lót:<br>
      <input type="text" name="tenlot">
      <br>
      Tên:<br>
      <input type="text" name="ten">
    </form>
    Xem ví dụ

    Kiểu radio


    <input type="radio"> - Xác định sự lựa chọn duy nhất trong nhiều lựa chọn
    <input type="radio" name="gioitinh" value="nam" checked> Nam<br>
    <input type="radio" name="gioitinh" value="nu"> Nữ<br>
    <input type="radio" name="gioitinh" value="khac"> Khác
    Xem ví dụ

    Kiểu nút gửi


    <input type="submit"> - Xác định nút gửi biểu mẫu lên server.
    <form action="/home/tryit/try/html-submit.html">
      Họ:<br>
      <input type="text" name="ho" value="Nguyễn"><br>
      Tên lót:<br>
      <input type="text" name="tenlot" value="Lê"><br>
      Tên:<br>
      <input type="text" name="ten" value="Điệp"><br><br>
      <input type="submit" id="gui" value="Gửi">
    </form>
    Xem ví dụ

    Thuộc tính action

    Với thuộc tính action dùng để thực hiện những yêu cầu khi biểu mẫu được gửi. Thông thường, các dữ liệu được gửi từ biểu mẫu đến một trang web trên máy chủ khi người dùng nhấp vào.

    Ở ví dụ trên các dữ liệu trong biểu mẫu sẽ được gửi đến trang có tên "html-submit.html".

    <form action="/home/tryit/try/html-submit.html">
    Nếu thuộc tính action được bỏ trống thì biểu mẫu sẽ gửi ở trang hiện tại.

    Phương pháp thuộc tính

    Trong form thông thường có hai phương thức HTTP đó là GET và POST để thực hiển gửi dữ liệu từ biểu mẫu.
    <form action="/home/tryit/try/html-submit.html" method="get">
    hoặc
    <form action="/home/tryit/try/html-submit.html" method="post">

    Phương thức GET


    Phương pháp mặc định khi gửi dữ liệu từ biểu mẫu là GET. Khi sử dụng GET, các dữ liệu được gửi từ biểu mẫu đã được nhập thường sẽ được hiển thị lên thanh địa chỉ của trình duyệt.

    /home/tryit/try/html-submit.html?ho=Nguyen&tenlot=Le&ten=Diep
    Với phương thức này không nên sử dụng với dữ liệu đầu vào có nội dung dài và là nội dung nhẹ cảm

    Phương thức POST


    Bạn nên sử dụng phương thức POST nếu dữ liệu được từ biểu mẫu là nhưng thông tin nhẹ cảm hoặc có nội dung dài. Với phương thức POST sẽ không được hiển thị dữ liệu lên thanh địa chỉ của trình duyệt.

    Thuộc tính name

    Mỗi dữ liệu đầu vào sẽ đượng xác định với mỗi thuộc tính name khác nhau. Nếu những dữ liệu không có thuộc tính name thì những dữ liệu đó sẽ không được gửi.

    <form action="/home/tryit/try/html-submit.html">
      Họ:<br>
      <input type="text" name="ho" value="Nguyễn"><br>
      Tên lót:<br>
      <input type="text" name="tenlot" value="Lê"><br>
      Tên:<br>
      <input type="text" name="ten" value="Điệp"><br><br>
      <input type="submit" id="gui" value="Gửi">
    </form>
    Xem ví dụ

    Phần tử fieldset

    Phần tử fieldset được xác định là một nhóm dữ liệu nhấn mạnh trong form và phần tử legend là một chú thích cho fieldset.
    <form action="/home/tryit/try/html-submit.html">
      <fieldset>
        <legend>Đây là form nhập họ và tên</legend>
        Họ:<br>
        <input type="text" name="ho" value="Nguyễn"><br>
        Tên lót:<br>
        <input type="text" name="tenlot" value="Lê"><br>
        Tên:<br>
        <input type="text" name="ten" value="Điệp"><br><br>
        <input type="submit" id="gui" value="Gửi">
      </fieldset>
    </form>
    Xem ví dụ

    Gửi mail trong form

    <h2>Mail sẽ được gửi tới nguyenlediep.it@gmail.com</h2>
    <form action="mailto:nguyenlediep.it@gmail.com" method="post" enctype="text/plain">
      Tên:<br>
      <input type="text" name="ten"><br>
      Mail:<br>
      <input type="text" name="mail"><br>
      Nội dung:<br>
      <input type="text" name="nouidung" size="50"><br><br>
      <input type="submit" value="Gửi">
      <input type="reset" value="Làm Lại">
    </form>
    Xem ví dụ

    Các thuộc tính của form

    Thuộc tính Ý nghĩa
    accept-charset Xác định bảng mã được sử dụng trong form. Mặc định thường là charset của trang
    action Xác định nơi biểu mẫu gửi đến
    autocomplete Xác định trình duyệt tự động điền vào form
    enctype Xác định mã hóa dữ liệu của biểu mẫu
    method Xác định phương thức được gửi biểu mẫu. Mặc định là GET
    name Xác định các tên trong biểu mẫu được gửi đi.
    novalidate Xác định trình duyệt không cần xác nhận
    target Xác định hiển thị cho trình duyệt. Mặc định là _self
    Học tốt nhé các bạn!wink
    Từ khóa:

    Form trong HTML

    Form trong HTML

    Form trong HTML

    Form trong HTML
    Form trong HTML
    1 or 0
    Lưu ý: Đăng câu hỏi trên Group Facebook để được hỗ trợ nhanh nhất.
    Đang tải...
    Nguyễn Lê Điệp
    Có sở thích lập trình, viết lách nên đã từng tham gia quản trị và viết bài ở một số diễn đàn, đến năm 2016 mới có điều kiện sáng lập ra kennis.vn với mục đích chia sẻ để học tập. Sinh năm 93, đang học tập và làm việc tại Hồ Chí Minh City.

    Thống kê

    - Hôm nay:
    234
    - Hôm qua:
    425
    - Tuần này:
    2.734
    - Tuần trước:
    3.197
    - Tháng này:
    10.382
    - Tháng trước:
    19.065
    - Năm này:
    234.065
    - Năm trước:
    17.373
    - Tổng cộng:
    251.438