Phần tử form trong HTML

  • Nguyễn Lê Điệp
  • 06-01-2017
  • 152
  • 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ử input

    Trong form của HTML thì phần tử input là một phần tử quan trọng nhất. Phần tử input có thể được hiển thị bằng nhiều cách, tùy thuộc vào loại của thuộc tính.

    Phần tử select

    Với phần tử select thì nó sẽ liệt kê một danh sách theo dạng sổ xuống.

    <select name="loai">
    	  <option value="html">Học HTML</option>
    	  <option value="css">Học CSS</option>
    	  <option value="php">Học PHP</option>
    	  <option value="mysql">Học MySQL</option>
    </select>
    Xem ví dụ
    Với thẻ option là những mục để người dùng có thể lựa chọn. Theo mặc định thì mục option được liệt kê đầu tiên sẽ được lựa chọn. Để lựa chọn các mục theo ý định thì các bạn thêm thuộc tính selected.
    <option value="php" selected>Học PHP</option>
    Xem ví dụ

    Phần tử textarea

    Với textarea thường được sử dụng để nhập một đoạn văn bản với nội dung lớn và nhiều dòng. Với thuộc tính rows là số dòng bạn có thể nhìn thấy trên vùng nhập văn bản và thuộc tính cols dùng để xác định chiều rộng của vùng nhập.
    <textarea name="noidung" rows="10" cols="30">Đây là nơi dùng để nhập văn bản với nội dung lớn.</textarea>
    Xem ví dụ

    Phần tử button

    Với phần tử này giúp cho người click vào để gửi một dữ liệu nào đó tới máy chủ.
    <button type="button" onclick="alert('Xin chào các bạn!')">Nhấp vào đây!</button>
    Xem ví dụ

    Phần tử datalist

    Với phần tử này giúp các bạn xác định được các danh sách được sổ xuống với phần tử input mà người dùng có thể nhìn thấy trước khi gửi lên máy chủ. Để nó làm việc giữa phần tử input và datalist thông qua thuộc tính list của input và thuộc tính id của datalist phải giống nhau.
    <form action="/home/tryit/try/html-submit.html">
      <input list="demo">
      <datalist id="demo">
        <option value="Học HTML">
        <option value="Học CSS">
        <option value="Học PHP">
        <option value="Học MySQL">
        <option value="Học Wordpress">
      </datalist>
    </form>
    Xem ví dụ

    Phần tử keygen

    Đối với phần tử này là để xác thực người dùng hay còn gọi đó là khóa. Thường với phần tử này sẽ sinh ra hai khóa với một khóa bí mật và một khóa được công khai. Với khóa bí mật dùng để xác định người dùng trong tương lai còn khóa công khai dùng để gửi lên máy chủ.
    <form action="/home/tryit/try/html-submit.html">
      Tên đăng nhập: <input type="text" name="tendangnhap">
      <br /><br />
      Mã hóa: <keygen name="security">
    </form>
    Xem ví dụ

    Phần tử output

    Với phần tử output được xác định để đưa ra một kết quả nào đó trong phép tính có sẵn.
    <form action="/home/tryit/try/html-submit.html" oninput="x.value=parseInt(a.value)+parseInt(b.value)">
      0
      <input type="range"  id="a" name="a" value="50">
      100 +
      <input type="number" id="b" name="b" value="50" style="width:30px">
      =
      <output name="x" for="a b"></output>
    </form>
    Xem ví dụ
    Với các phần tử datalist, keygen, output sẽ không hiển thị với các trình duyệt có phiên bản thấp vì đây là ba phần tử thuộc HTML5
    Học tốt nhé các bạn!cool
    Từ khóa:

    Phần tử form trong HTML

    Phần tử form trong HTML

    Phần tử form trong HTML

    Phần tử form trong HTML
    Phần tử 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:
    477
    - Hôm qua:
    904
    - Tuần này:
    4.939
    - Tuần trước:
    6.504
    - Tháng này:
    19.096
    - Tháng trước:
    24.702
    - Năm này:
    136.487
    - Năm trước:
    17.373
    - Tổng cộng:
    153.860