Kiểu đầu vào trong HTML

  • Nguyễn Lê Điệp
  • 07-01-2017
  • 126
  • 0
  • 2
  • 0
  • Bài viết được đăng tại kennis.vn - không copy dưới mọi hình thức.
    Ở bài học này mình sẽ nói một cách chi tiết và đầy đủ kèm ví dụ rõ ràng cho các kiểu đầu vào khác nhau cho các phần tử input.

    Kiểu văn bản

    <input type="text"> - Xác định kiểu dữ liệu nhập vào là dạng văn bản nằm trên cùng một dòng.
    <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ụ

    Kểu password

    <input type="password"> - Xác định một mật khẩu của người dùng nhập vào. Và thường được hiển thị với các dấu chấm bi tròn.
    <form>
      Tên đăng nhập<br>
      <input type="text" name="tendangnhap">
      <br>
      Mật khẩu:<br>
      <input type="password" name="matkhau">
    </form>
    Xem ví dụ

    Kiểu submit

    <input type="submit"> - Xác định sự kiện gửi từ người dùng lên máy chủ hoặc một hành động, sự kiện nào đó khi nhấp vào nút này sẽ được xảy ra. Nếu bạn bỏ trống giá trị value cảu kiểu submit thì mặc định nó sẽ hiển thị với tên là submit (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ụ

    Kiểu reset

    <input type="reset"> - Xác định làm lại từ đầu với các thông tin input bị bỏ trống khi nhấp vào nút này hoặc sẽ trở về giá trị ban đầu có sẵn của form.
    <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">
      <input type="reset" value="Làm Lại">
    </form>
    Xem ví dụ

    Kiểu radio

    <input type="radio"> - Xác định sự lựa chọn một trong nhiều sự lựa chọn khác nhau. Neus bạn đã chọn mục này thì không thể chọn mục khác.
    <form>
      <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
    </form>
    Xem ví dụ

    Kiểu checkbox

    <input type="checkbox"> - Nếu kiểu radio chỉ chọn một thì kiểu checkbox này hoàn toàn ngược lại nó cho bạn chọn nhiều sự lựa chọn khác nhau.
    <form>
      <input type="checkbox" name="web" value="nam" checked> Học lập trình web<br>
      <input type="checkbox" name="html" value="nu"> Học ngôn ngữ HTML<br>
      <input type="checkbox" name="css" value="khac"> Học ngôn ngữ CSS
    </form>
    Xem ví dụ

    Kiểu button

    <input type="button"> - Xác định một nút gửi khi người dùng chọn.
    <button type="button" onclick="alert('Xin chào các bạn!')">Nhấp vào đây!</button>
    Xem ví dụ

    Các kiểu trong HTML5

    Ở phiên bản HTML có thêm các kiểu mới sau:
    Kiểu Chức năng
    color Xác định màu văn bản
    date Xác định ngày, tháng và năm
    datetime Xác định ngày, tháng, năm, giờ, phút và giây
    datetime-local Xác định ngày, tháng, năm, giờ, phút và giây của một vùng nào đó
    email Xác định một văn bản nhập vào có phải là mail
    month Xác định tháng
    number Xác định kiểu số
    range Xác định một phạm vi nào đó đã định sẵn
    search Xác định kiểu tìm kiếm
    tel Xác định kiểu số điện thoại
    time Xác định kiểu giờ, phút và giây
    url Xác định kiểu địa chỉ trang web
    week Xác định kiểu tuần trong tháng
    Với các kiểu bên trên thì các trình duyệt cũ sẽ không nhận dạng được như nhận dạng kiểu <input type="text">

    Kiểu number


    <input type="number"> - Với kiểu này chỉ cho các bạn nhập vào là một số và bạn cũng có thể chiều dài của một số với thuộc tính min và max.
    <form action="/">
      Có độ dài từ 1 đến 10
      <input type="number" name="dodai" min="1" max="10">
      <input type="submit" value="Gửi">
    </form>
    Xem ví dụ

    Kiểu date


    <input type="date"> - Xác định ngày, tháng và năm và bạn cũng có thể giới hạn ngày, tháng và năm với thuộc tính min và max.
    <form action="/">
      Dưới đây là một ví dụ về kiểu ngày, tháng và năm
      <br />
      <input type="date" name="ngay" min="1993-03-30">
      <input type="submit" value="Gửi">
    </form>
    Xem ví dụ

    Kiểu color


    <input type="color"> - Xác định màu của một dữ liệu đầu vào.
    <form action="/">
      <input type="color" name="favcolor" value="#00ffff">
    </form>
    Xem ví dụ

    Kiểu range


    <input type="range"> - Xác định một dãi giá trị cho trước. Và bạn cũng có thể giới hạn với thuộc tính min và max.
    <form action="/">
      <input type="range" name="demo" min="0" max="15">
    </form>
    Xem ví dụ

    Kiểu month


    <input type="month"> - Xác định một tháng nào đó.
    <form action="/">
      <input type="month" name="thang">
      <input type="submit">
    </form>
    Xem ví dụ

    Kiểu week


    <input type="week"> - Xác định một tuần nào đó trong tháng hoặc trong năm.
    <form action="/">
      <input type="week" name="tuan">
      <input type="submit">
    </form>
    Xem ví dụ

    Kiểu time


    <input type="time"> - Xác định một thời gian cho người dùng chọn.
    <form action="/">
      <input type="time" name="thoigian">
      <input type="submit">
    </form>
    Xem ví dụ

    Kiểu datetime-local


    <input type="datetime-local"> - Xác định thời gian của một vùng nào đó.
    <form action="/">
      <input type="datetime-local" name="thoigiandiaphuong">
      <input type="submit">
    </form>
    Xem ví dụ

    Kiểu email


    <input type="email"> - Xác định mail và kiểm tra mail do người dùng nhập vào
    <form action="/">
      <input type="email" name="email">
      <input type="submit">
    </form>
    Xem ví dụ.

    Kiểu search


    <input type="search"> - Được sử dụng trong chức năng tìm kiếm.
    <form action="/">
      <input type="search" name="timkiem">
    </form>
    Xem ví dụ

    Kiểu tel


    <input type="tel"> - Được sử dụng với việc nhập vào là số điện thoại.
    <form action="/">
      <input type="tel" name="sodienthoai">
      <input type="submit">
    </form>
    Xem ví dụ

    Kiểu url


    <input type="url"> - Được sử dụng với việc nhập vào là một địa chỉ trang web hoặc đa phương tiện...
    <form action="/">
      <input type="url" name="diachi">
      <input type="submit">
    </form>
    Xem ví dụ
    Ôi chu cha! Mỏi tay quá nhưng không quên chúc các bạn học tốt!indecision
    Từ khóa:

    Kiểu đầu vào trong HTML

    Kiểu đầu vào trong HTML

    Kiểu đầu vào trong HTML

    Kiểu đầu vào trong HTML
    Kiểu đầu vào trong HTML
    2 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:
    344
    - Hôm qua:
    704
    - Tuần này:
    2.445
    - Tuần trước:
    4.456
    - Tháng này:
    17.068
    - Tháng trước:
    21.317
    - Năm này:
    109.757
    - Năm trước:
    17.373
    - Tổng cộng:
    127.130