728x90 AdSpace

Breaking

[recent][ticker2]
Friday, September 03, 2021

Các thuộc tính của thẻ Input trong HTML5 - Input Attributes

1. Định nghĩa thẻ Input

Thẻ input trong HTML được sử dụng để biểu diễn một trường dữ liệu. Nơi mà người dùng cũng có thể nhập dữ liệu đầu vào. 
Thẻ input thường được sử dụng bên trong phần tử form, để khai báo dữ liệu người dùng nhập vào. Thẻ có thể sử dụng với nhiều thuộc tính, và không cần thẻ kết thúc trong HTML.

2. Các thuộc tính của thẻ Input - Attributes

Thuộc tính value

Đây là thuộc tính xác định giá trị đầu ban đầu cho thẻ input. Cụ thể là các bạn muốn thay đổi giá trị hiển thị trên thẻ input, thì các bạn phải thay đổi giá trị của thuộc tính value này.
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
    <title>HTML Input Attributes</title>
    <meta charset="utf-8">
</head>
<body>
    <div class="container-xl">
<h1 style="margin: 20px auto; text-align: center;">HTML Input Attributes</h1>
<form action="">
    <label>First name:</label><br>
    <input type="text" id="firstname" name="firstname" value="Elon"><br>       
    <label>Last name:</label><br>
    <input type="text" id="lastname" name="lastname" value="Musk">
</form>
    </div>
</body>
</html>


Kết quả:

Thuộc tính readonly

Thuộc tính chỉ định rằng trường dữ liệu đầu vào chỉ có thể đọc, không thay đổi được. Tuy nhiên dữ liệu của thẻ input cũng có thể sao chép và cũng được gửi đi khi submit form.

    <form action="">
        <label>First name:</label><br>
        <input type="text" id="firstname" readonly name="firstname" value="Elon"><br>       
        <label>Last name:</label><br>
        <input type="text" id="lastname" readonly="" name="lastname" value="Musk">
    </form>
Trong đoạn code trên, cả hai cách dùng thuộc tính readonly đều cho ra cùng một kết quả.

Thuộc tính disabled

Thuộc tính chỉ định rằng trường dữ liệu đầu vào sẽ bị vô hiệu hoá. Trường dữ liệu đầu bị vô hiệu hoá không sử dụng được và cũng không được chấp nhận. 

    <form action="">
        <label>First name:</label><br>
        <input type="text" id="firstname" disabled name="firstname" value="Elon"><br>       
        <label>Last name:</label><br>
        <input type="text" id="lastname" readonly name="lastname" value="Musk">
    </form>
Thuộc tính này khác thuộc tính readonly ở chỗ dữ liệu sẽ không được gửi đi khi submit form.

Kết quả:

Thuộc tính size

Thuộc tính chỉ định chiều rộng hiển thị của khung nhập, được tính bằng ký tự của trường dữ liệu đầu vào. Giá trị mặc định của thuộc tính size là 20 ký tự. 

    <form action="">
        <label>First name:</label><br>
        <input type="text" id="firstname" name="firstname" value=""><br>       
        <label>Last name:</label><br>
        <input type="text" id="lastname" size="40" name="lastname" value="">
    </form>
Các bạn cần lưu ý, đây là thuộc tính xác định độ rộng của khung nhập. Không phải là chiều dài của chuỗi ký tự nhập vào thẻ nhé.

Kết quả:

Thuộc tính maxlength

Đây là thuộc tính chỉ định số ký tự tối đa được phép nhập vào thẻ.

    <form action="">
        <label>First name:</label><br>
        <input type="text" id="firstname" name="firstname" value=""><br>       
        <label>Last name:</label><br>
        <input type="text" id="lastname" maxlength="10" name="lastname" value="">
    </form>
Lưu ý: khi các bạn đặt thuộc tính maxlength thì trường nhập liệu sẽ không chấp nhận nhiều hơn số ký tự đã được chỉ định. Và khi đạt được số ký tự tối đa thì thuộc tính này cũng không cung cấp cho người dùng bất cứ phản hồi nào. Nếu các bạn muốn người dùng nhận được phản hồi khi nhập quá số ký tự tối đa thì các bạn phải sử dụng code javascript (hoặc jquery) để bật thông báo.

Kết quả:

Thuộc tính min và max

Chỉ định giá trị tối thiểu và tối đa cho trường dữ liệu đầu vào của thẻ. Thuộc tính này thường được sử dụng với các loại dữ liệu đầu vào như số, ngày, ngày giờ, tháng, giờ, ngày trong tuần.

Ví dụ cụ thể như chúng ta chỉ muốn người dùng nhập vào từ 01/0//2020 đến 31/12/2020, và giới hạn số nhập vào từ 1 đến 10 thì chúng ta có thể sử dụng đoạn code sau:

    <form action="">
        <label>Min Date:</label><br>
        <input type="date" id="min_date" name="min_date" min="2020-01-01"> (after 2020-01-01)<br><br>       
        <label>Max Date:</label><br>
        <input type="date" id="max_date" name="max_date" max="2020-12-31"> (before 2021-01-01)<br><br>

        <label>Quantity:</label>
        <input type="number" id="quantity" name="quantity" size="2" min="1" max="10">(between 1 and 10)
    </form>
Quan trọng: để có được kết quả như mong muốn thì các bạn phải thiết lập type thích hợp nhé. 

Kết quả:

Thuộc tính multiple

Cho phép người dùng nhập nhiều hơn một giá trị vào trường đầu vào. Thuộc tính này chỉ hoạt động với các loại đầu vào: email và file.

    <form action="">
        <label for="emails">Your emails:</label><br />
        <input type="email" id="emails" name="emails" multiple size="40"><br><br>      

        <label for="files">Choose files:</label><br>
        <input type="file" id="files" name="files" multiple>
    </form>
Lưu ý: khi sử dụng thuộc tính multiple kết hợp với type=email thì các bạn có thể nhập nhiều hơn 1 email. Giữa các email phải được phân cách bở dấy phẩy, và không có khoảng trắng. 

Kết quả:

Thuộc tính pattern

Chỉ định giá trị nhập vào theo một biểu mẫu nhất định. Giá của trường đầu vào sẽ được kiểm tra lại khi submit form. 

    <form action="/action_page.php">
        <label>Zip code:</label>
        <input type="text" id="zipcode" name="zipcode" pattern="[0-9]{6}" title="Zipcode phải là 6 số">      
        <input type="submit" value="Submit">
    </form>
Trong đoạn code để người dùng nhập đúng theo quy định về zipcode. Chúng ta đã dùng thuộc tính pattern để chỉ cho phép người dùng được nhập đủ 6 ký tự số.
Thuộc tính pattern hoạt động với các loại dữ liệu đầu vào như: văn bản, tìm kiếm, ngày tháng, url, số điện thoại, email và mật khẩu.

Kết quả:

Thuộc tính autocomplete

Chỉ định biểu mẫu hoặc trường nhập liệu có nên bật hoặc tắt tính năng tự động hoàn thành hay không. Autocomplete cho phép trình duyệt dự đoán giá trị mong muốn. Khi người dùng nhập vào một giá trị, trình duyệt sẽ hiển thị các tuỳ chọn cho người dùng dựa trên các giá trị đã được nhập trước đó.

    <form action="/action_page.php" autocomplete="on">
        <label>Full name:</label>
        <input type="text" id="fname" name="fname"><br><br>

        <label>Email address:</label>
        <input type="email" id="email" name="email" autocomplete="off"><br><br>
        <input type="submit" value="Submit">
    </form>
Thuộc tính autocomplete hoạt động với form và các loại input sau: văn bản, tìm kiếm, url, số điện thoại, email, mật khẩu, phạm vi và màu sắc.

Kết quả:

Thuộc tính list

Thuộc tính list dùng để tham chiếu đến danh sách dữ liệu (<datalist>) chứa các tùy chọn được thiết lập trước cho <input>. Câu này hơi khó hiểu đúng không các bạn? Các bạn xem ví dụ dưới đây sẽ hiểu rõ hơn.

    <form action="/action_page.php" autocomplete="on">
        <label>Product:</label>
        <input list="prolist" name="prolist">
        <datalist id="prolist">
            <option value="glasses">
            <option value="shoes">
            <option value="shirt">
            <option value="dress">
            <option value="hat">
        </datalist>
        <input type="submit" value="Submit">
    </form>
Thuộc tính này tương tự như autocomplete khi người dùng nhập liệu. Nhưng thuộc tính này không liệt kê ra những dữ liệu thu thập từ những lần nhập liệu trước đó, mà liệt kê ra danh sách được chỉ định rõ ràng khi thiết kế.

Kết quả:

Thuộc tính autofocus

Thuộc tính chỉ định trường đầu vào sẽ được lấy tiêu điểm khi trang được tải lên.

    <form action="/action_page.php">
        <label>First name:</label><br>
        <input type="text" id="firstname" name="firstname" autofocus value=""><br>
        <label>Last name:</label><br>
        <input type="text" id="lastname" name="lastname" value="">
        <input type="submit" value="Submit">
    </form>
Nhìn vào hình ảnh kết quả chạy code bên dưới chắc chắn các bạn đã hiểu rõ về autofocus rùi đúng không ạ.

Kết quả:

Thuộc tính step

Thuộc tính này khoảng số hợp quy cho trường dữ liệu đầu vào. 

    <form action="/action_page.php">
        <label>Points:</label>
        <input type="number" id="points" name="points" step="2">
        <input type="submit" value="Submit">
    </form>
Ví dụ step = 2 thì các số hợp lệ là : ..., -2, 0, 2, 4, 6, ... Thuộc tính step hoạt động với các loại dữ liệu đầu vào như: số, phạm vi, ngày, ngày giờ, tháng, giờ và ngày trong tuần. Nếu người dùng nhập vào số không hợp lệ, thì khi submit form sẽ nhận được cảnh báo như hình dưới.

Kết quả:

Thuộc tính required

Thuộc tính required chỉ định rằng một trường đầu vào phải được điền trước khi gửi biểu mẫu.. 

    <form action="/action_page.php">
        <label>User name:</label><br>
        <input type="text" id="username" name="username" required value="">
        <input type="submit" value="Submit">
    </form>
Nếu như trường dữ liệu đầu vào để rỗng, thì khi submit form sẽ nhận được thông báo như hình. Chỉ khi nào trường dữ liệu đầu không rỗng thì người dùng mới submit form được.

Kết quả:

Thuộc tính placeholder

Thuộc tính hiển thị một gợi ý ngắn mô tả giá trị mong muốn của trường đầu vào (giá trị mẫu hoặc mô tả ngắn về định dạng mong muốn).

    <form action="/action_page.php">
        <label for="phone">Phone number:</label>
        <input type="tel" id="phone" name="phone" placeholder="84-915-678-478" pattern="[0-9]{2}-[0-9]{3}-[0-9]{3}-[0-9]{3}"><br><br>
        <input type="submit" value="Submit">
    </form>
Chúng ta có thể kết hợp thuộc tính placeholder với thuộc tính pattern để tạo ra gợi ý và mẫu nhập liệu như mong muốn. Trong đoạn code trên, chúng ta kết hợp 2 thuộc tính để yêu cầu người dùng nhập đúng số điện thoại theo định dạng quy định.

Kết quả:


Xin kết thúc bài viết về <input> attributes nhé các bạn. Còn một bài viết về <inpput> types nữa, các bạn nhớ đón xem. Chúc các bạn thành công! 
Các thuộc tính của thẻ Input trong HTML5 - Input Attributes Reviewed by tips.vn on Friday, September 03, 2021 Rating: 5 1. Định nghĩa thẻ Input Thẻ input trong HTML được sử dụng để biểu diễn một trường dữ liệu. Nơi mà người dùng cũng có thể nhập dữ liệu đầu và...

Labels:

[Html & Css][carousel1]

No comments: