Bài 34: Thẻ input trong form | Học HTML

Thẻ <input>  là các yếu tố dùng để tạo ra một một đầu vào, và đầu vào có thể được hiển thị bằng nhiều cách khác nhau, tùy thuộc vào các loại giá trị nằm bên trong thuộc tính type.

 Cú pháp

 <form>
      Tên đăng nhập: <input type="text" name="password" placeholder="tên đăng nhập"/>
 <br />
      Mật khẩu: <input type="password" name="password" placeholder="Nhập mật khẩu" /> <br />
      <input type="submit" name="submit" value="Đăng nhập" />
</form>

▪ Trong đó:
   Thẻ <input>  là các yếu tố dùng để tạo ra một một đầu vào
   Thuộc tính type xác định loại hiển thi cho các giá trị nằm bên trong thuộc tính này.
   Thuộc tính name dùng để định nghĩa tên cho một input
   Thuộc tính placeholder dùng để tạo ra văn bản vô hình bên trong ô input.
 
✴ Sau đây là danh sách các giá trị của thuộc tính type:

▪ text: định nghĩa một lĩnh vực đầu vào một dòng cho đầu vào văn bản.
    Cú pháp

       <form>
           <input type="text" name=""/>
      </form>

 
    Kết quả khi chạy ví dụ trên

▪ password: tạo đầu vào văn bản khi hiển thị bằng dấu *.
      Cú pháp

       <form>
           <input type="password" name=""/>
      </form>

   
     Kết quả khi chạy ví dụ trên

▪ radio: tao lựa chọn với một nút radio .
      Cú pháp

       <input type="radio" name="checkbox"/>
       <input type="radio" name="checkbox" />

     Kết quả khi chạy ví dụ trên

▪ button: yếu tố xác định một thể click vào nút
      Cú pháp

       <form>
           <input type="button" name="" value="tên nút"/>
      </form>

     Kết quả khi chạy ví dụ trên

▪ checkbox: Được sử dụng cho nhiều lựa chọn khác nhau.
      Cú pháp

       <input type="checkbox" name=""/>
      <input type="checkbox" name=""/>

     Kết quả khi chạy ví dụ trên

  
 

▪ reset: Dùng để reset lại giá trị trong <form>.
      Cú pháp

       <form>
           <input type="reset" name="" value="tên nút"/>
      </form>

     Kết quả khi chạy ví dụ trên

▪ submit: Dùng để gửi dữ liệu lên server, dữ liệu được gửi thông qua thuộc tính action trong <form>.
      Cú pháp

       <form>
           <input type="submit" name="" value="tên nút"/>
      </form>

     Kết quả khi chạy ví dụ trên

▪ image: Sử dụng như một nút nhấn bằng hình.
        Cú pháp

        <form>
  <input type="image" src="images/btn_submit.jpeg" alt="SUBMIT" name="" />
  </form>

     Kết quả khi chạy ví dụ trên

▪ file: sử dụng để upload file.
      Cú pháp

       <form>
           <input type="file" name=""/>
      </form>

     Kết quả khi chạy ví dụ trên

▪ date: dùng để hiển thị dạng bảng ngày tháng
      Cú pháp

       <form>
           <input type="date" name=""/>
      </form>
   
color: dùng để hiển thị dạng bảng màu
      Cú pháp
       <form>
           <input type="color" name=""/>
      </form>

     Kết quả khi chạy ví dụ trên

▪ datetime-local: hiển thị dạng ngày tháng theo vùng.
      Cú pháp

       <form>
           <input type="datetime-local" name=""/>
      </form>

     Kết quả khi chạy ví dụ trên

▪ email: Dạng email giúp cho trình duyệt hiểu đúng dạng nhập vào là email.
      Cú pháp

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

     Kết quả khi chạy ví dụ trên

✴ Kết luận: Như vậy ở bài nay chúng tôi đã giới thiệu đến cadc bạn thẻ input và thuộc tính type và các giá trị nằm bên trong thuộc tính type.

Chúc bạn thành công.