Các kiểu Input trong HTML - HTML Input Types

  • Huân

    Tác giả

    Huân

  • Ngày đăng

    26 thg 10, 2023

  • Số lượt xem

    245 lượt xem


Bài học này sẽ mô tả các các thuộc tính khác nhau của thẻ <input> trong HTML( HTML Input Types). Chi tiết về các loại thẻ <input> và các cách sử dụng hợp lý trong website

HTML Input Types

Các kiểu Thẻ <input> thường được dùng trong HTML:

<input type="button">
<input type="checkbox">
<input type="color">
<input type="date">
<input type="datetime-local">
<input type="email">
<input type="file">
<input type="hidden">
<input type="image">
<input type="month">
<input type="number">
<input type="password">
<input type="radio">
<input type="range">
<input type="reset">
<input type="search">
<input type="submit">
<input type="tel">
<input type="text">
<input type="time">
<input type="url">
<input type="week">
Lưu ý: Thuộc tính mặc định sẽ là kiểu “text”

Input Type Text

<input type="text"> được định nghĩa bằng 1 dòng code của thẻ <input>:

Ví dụ

<form>
        <label for="fname">First name:</label><br>
        <input type="text" id="fname" name="fname"><br>
        <label for="lname">Last name:</label><br>
        <input type="text" id="lname" name="lname">
</form>

anh-input-kieu-van-ban

 

Input Type Password

<input type="password"> được định nghĩa bằng kiểu password

Ví dụ

<form>
        <label for="username">Username:</label><br>
        <input type="text" id="username" name="username"><br>
        <label for="pwd">Password:</label><br>
        <input type="password" id="pwd" name="pwd">
</form>

Input Type Submit

<input type="submit"> được định nghĩa bằng một nút để gửi dữ liệu xử lý form

Form-handler thường là một trang máy chủ với một đoạn mã để xử lý dữ liệu đầu vào

Form-handler được xác định trong thuộc tính action của biểu mẫu:

Ví dụ

<form action="/action_page.php">
        <label for="fname">First name:</label><br>
        <input type="text" id="fname" name="fname" value="John"><br>
        <label for="lname">Last name:</label><br>
        <input type="text" id="lname" name="lname" value="Doe"><br><br>
        <input type="submit" value="Submit">
</form>

Nếu bạn bỏ qua giá trị thuộc tính của nút gửi (submit button), nút đó sẽ có mặc định là text

Ví dụ

<form action="/action_page.php">
        <label for="fname">First name:</label><br>
        <input type="text" id="fname" name="fname" value="John"><br>
        <label for="lname">Last name:</label><br>
        <input type="text" id="lname" name="lname" value="Doe"><br><br>
        <input type="submit">
</form>

Input Type Reset

<input type="reset"> được định nghĩa là nút reset sẽ reset tất cả các giá trị đã điền:

Ví dụ

<form action="/action_page.php">
        <label for="fname">First name:</label><br>
        <input type="text" id="fname" name="fname" value="John"><br>
        <label for="lname">Last name:</label><br>
        <input type="text" id="lname" name="lname" value="Doe"><br><br>
        <input type="submit" value="Submit">
        <input type="reset" value="Reset">
</form>

Nếu bạn cần thay đổi các giá trị và nhấn vào nút reset, dữ liệu trên form sẽ được reset về giá trị mặc định

Input Type Radio

<input type="radio"> định nghĩa là một nút đơn

Nút radio sẽ cho phép 1 lựa chọn trong tất cả các lựa chọn

Ví dụ

<p>Choose your favorite Web language:</p>
<form>
        <input type="radio" id="html" name="fav_language" value="HTML">
        <label for="html">HTML</label><br>
        <input type="radio" id="css" name="fav_language" value="CSS">
        <label for="css">CSS</label><br>
        <input type="radio" id="javascript" name="fav_language" value="JavaScript">
        <label for="javascript">JavaScript</label>
</form>

Input Type Checkbox

<input type="checkbox"> được định nghĩa là một checkbox

Checkboxes sẽ cho phép người dùng có nhiều sự lựa chọn trong tất cả các sự lựa chọn

Ví dụ

<form>
        <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
        <label for="vehicle1"> I have a bike</label><br>
        <input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
        <label for="vehicle2"> I have a car</label><br>
        <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
        <label for="vehicle3"> I have a boat</label>
</form>

Input Type Button

<input type="button"> được định nghĩa là một nút:

Ví dụ

<input type="button" onclick="alert('Hello World!')" value="Click Me!">

Input Type Color

Thẻ <input type="color"> thường được dùng cho các kiểu input có chứa màu sắc

Phụ thuộc vào trình duyệt có hỗ trợ, mỗi sự lựa chọn sẽ có một màu khác nhau

Ví dụ

<form>
        <label for="favcolor">Select your favorite color:</label>
        <input type="color" id="favcolor" name="favcolor">
</form>

Input Type Date

Thẻ <input type="date"> thường được sử dụng cho trường nhập là kiểu ngày

Tùy thuộc vào sự hỗ trợ của trình duyệt, một bảng chọn ngày có Thẻ xuất hiện trong trường nhập (input field).

Ví dụ

<form>
        <label for="birthday">Birthday:</label>
        <input type="date" id="birthday" name="birthday">
</form>

Bạn có Thẻ dùng thuộc tính để giới hạn ngày gần nhất và ngày lâu nhất

Ví dụ

<form>
        <label for="datemax">Enter a date before 1980-01-01:</label>
        <input type="date" id="datemax" name="datemax" max="1979-12-31"><br><br>
        <label for="datemin">Enter a date after 2000-01-01:</label>
        <input type="date" id="datemin" name="datemin" min="2000-01-02">
</form>

Input Type Datetime-local

Thẻ <input type="datetime-local"> thường được sử dụng để nhập ngày, giờ, không có múi giờ

Tùy thuộc vào khả năng hỗ trợ của trình duyệt, một bảng chọn ngày có Thẻ xuất hiện trong trường nhập

Ví dụ

<form>
        <label for="birthdaytime">Birthday (date and time):</label>
        <input type="datetime-local" id="birthdaytime" name="birthdaytime">
</form>

Input Type Email

Thẻ <input type="email"> thường được để nhập email

Tùy thuộc vào khả năng hỗ trợ của trình duyệt, địa chỉ email có Thẻ tự động xác thực khi gửi

Một vài điện thoại thông minh nhận dạng được kiểu dữ liệu email và tự động Thẻm “.com” vào cuối trường nhập email

Ví dụ

<form>
        <label for="email">Enter your email:</label>
        <input type="email" id="email" name="email">
</form>

Input type Image

Thẻ <input type"image"> thường được dung làm môjt nút để upload những hình ảnh được chọn vào trong form
Đường dẫn đến hình ảnh được chỉ định trong thuộc tính src

Ví dụ

<form>
        <label for="mylife">Select a file</label>
        <input type="image" src="img_submit.gif" alt="submit" width="48" height="48">
</form>

Input Type File

Thẻ <input type="file"> được định nghĩa lựa chọn 1 file để upload files

Ví dụ

<form>
        <label for="myfile">Select a file:</label>
        <input type="file" id="myfile" name="myfile">
</form>

Input Type Hidden

Thẻ <input type="hidden"> thường được dùng để ẩn những những thông tin nhạy cảm của người dùng (người nhập cũng không thể nhìn thấy được)

Hidden có thể giúp cho các lập trình viên không thể thấy được dữ liệu của người dùng khi gửi

Hidden thường lưu những thông tin khi thẻ <form> được gửi đi

Lưu ý: Mặc dù giá trị của trường này không được hiển thị trong nội dung trang cho người dùng, nó vẫn có thể thấy và chỉnh sửa bằng cách sử dụng các công cụ phát triển của trình duyệt hoặc chức năng "Xem nguồn" của trình duyệt. Không nên sử dụng các trường hidden như một biện pháp bảo mật.

Ví dụ

<form>
        <label for="fname">First name:</label>
        <input type="text" id="fname" name="fname"><br><br>
        <input type="hidden" id="custId" name="custId" value="3487">
        <input type="submit" value="Submit">
</form>

Input Type Month

Thẻ <input type="month"> cho phép người dùng lựa chọn tháng và năm

Nó phụ thuộc vào sự hỗ trợ của trình duyệt và ngày tháng được chọn sẽ được show ra trong thẻ <input>

Ví dụ

<form>
        <label for="bdaymonth">Birthday (month and year):</label>
        <input type="month" id="bdaymonth" name="bdaymonth">
</form>

Input Type Number

Thẻ <input type="number"> để định nghĩa là kiểu nhập số

Bạn cũng có thể cài đặt những ràng buộc nhất định để được chấp nhận

Hiển thị trường nhập số, giới hạn nhập từ 1-5

Ví dụ

<form>
        <label for="quantity">Quantity (between 1 and 5):</label>
        <input type="number" id="quantity" name="quantity" min="1" max="5">
</form>

Input Restrictions

Các thuộc tính cho trường nhập (input fields) trong HTML:

Thuộc tính Mô tả
checked

 Xác định rằng trường nhập (input field) nên được chọn mặc định khi trang tải( đối với type="checkbox" hoặc type="radio").

disabled Xác định rằng trường nhập nên bị vô hiệu hóa.
max Xác định giá trị tối đa cho trường nhập.
maxlength Xác định số ký tự tối đa cho trường nhập.
min Xác định giá trị tối thiểu cho trường nhập.
pattern Xác định biểu thức chính quy để kiểm tra giá trị nhập vào.
readonly Xác định rằng trường nhập chỉ có thể đọc (không thể thay đổi).
required Xác định rằng trường nhập là bắt buộc (phải được điền).
size Xác định độ rộng (theo số ký tự) của trường nhập.
step Xác định khoảng cách giá trị số hợp lệ cho trường nhập.
value Xác định giá trị mặc định cho trường nhập.

Bạn sẽ được tìm hiểu về các ràng buộc trong bài học tiếp theo

Nhập giá trị số từ 0-100, bước nhảy là 10, giá trị mặc định là 30

Ví dụ

<form>
        <label for="quantity">Quantity:</label>
        <input type="number" id="quantity" name="quantity" min="0" max="100" step="10" value="30">
</form>

Input Type Range

Thẻ <input type="search"> được sử dụng cho trường tìm kiếm (search fields), trong đó trường tìm kiếm hoạt động giống như một trường văn bản thông thường.

Ví dụ

<form>
        <label for="vol">Volume (between 0 and 50):</label>
        <input type="range" id="vol" name="vol" min="0" max="50">
</form>

Thẻ <input type="search"> được sử dụng để tìm kiếm

Ví dụ

<form>
        <label for="gsearch">Search Google:</label>
        <input type="search" id="gsearch" name="gsearch">
</form>

Input Type Tel

Thẻ <input type="tel"> được dùng để nhập số điện thoại

Ví dụ

<form>
        <label for="phone">Enter your phone number:</label>
        <input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
</form>

Input Type Time

Thẻ <input type="time"> cho phép nhập thời gian( không bao gồm múi giờ)

Phụ thuộc vào trình duyệt hỗ trợ, thời gian được chọn có thể hiển thị trên thẻ <input>

Ví dụ

<form>
        <label for="appt">Select a time:</label>
        <input type="time" id="appt" name="appt">
</form>

Input Type Url

Thẻ <input type="url"> được sử dụng cho các trường nhập (input fields) nên chứa địa chỉ URL.

Tùy thuộc vào khả năng hỗ trợ của trình duyệt, trường nhập URL có thể được kiểm tra tính hợp lệ tự động khi được gửi.

Một số điện thoại thông minh nhận dạng loại URL và thêm ".com" vào bàn phím để phù hợp với việc nhập địa chỉ URL

Ví dụ

<form>
        <label for="homepage">Add your homepage:</label>
        <input type="url" id="homepage" name="homepage">
</form>

Input Type Week

Thẻ <input type="week"> cho phép người dùng chọn một tuần và năm.

Tùy thuộc vào khả năng hỗ trợ của trình duyệt, một bảng chọn ngày có thể xuất hiện trong trường nhập.

Ví dụ

<form>
        <label for="week">Select a week:</label>
        <input type="week" id="week" name="week">
</form>

Tổng số đánh giá: 0

Xếp hạng: 5 / 5 sao

Danh sách bài học về HTML

Liên Kết Chia Sẻ

Đây là liên kết chia sẻ bới cộng đồng người dùng, chúng tôi không chịu trách nhiệm gì về nội dung của các thông tin này. Nếu có liên kết nào không phù hợp xin hãy báo cho admin.