Thuộc tính Type của thẻ Input trong HTML5 - Input Types

Phần tử Input trên HTML thường được sử dụng, kết hợp với phần tử form để tạo một giao diện tương tác và nhận thông tin từ người dùng. Phần tử này có sự kết hợp của hai loại sau:

    • <input> types
    • <input> attributes

Do có sự kết hợp của nhiều loại (types) và nhiều thuộc tính (attributes) trong phần tử <input>, nên phần tử <input> cũng là một trong những phần tử mạnh mẽ và phức tạp nhất trong HTML. Để tìm hiểu về <input> attributes thì các bạn có thể tham khảo qua bài viết:


<input> types

Phần tử input hoạt động phụ thuộc đáng kể vào giá trị của thuộc tính type, do đó các giá trị type khác nhau sẽ bao gồm các trang tham chiếu riêng biệt khác nhau. Nếu thuộc tính này không được chỉ định, thì mặc định sẽ được hiểu là type = text. Các giá trị của type bao gồm:

1. <input type = "text">

Là loại khung nhập liệu đơn dòng, được sử dụng cho việc nhập dữ liệu đầu vào.
<!-- index.html -->
<html>
    <body>
<label>User name:</label>
    <input type="text" name="name">
    </body>
</html>

2. <input type="email">

Được sử dụng để cho phép người dùng nhập hoặc chỉnh sửa một hoặc nhiều email nếu được dùng kết hợp với thuộc tính multiple.
<!-- index.html -->
<html>
    <body>
<label>Your email:</label>
<input type="email" name="email" pattern=".+@gmail\.com" required>

    <label>Your emails:</label>
<input type="email" name="emails" multiple>
    </body>
</html>

Ở đoạn code trên, type email đã kết hợp với thuộc tính required và pattern để yêu cầu người nhập không được để trống, đồng thời chỉ chấp nhận loại địa chỉ có đuôi gmail.com. Ngoài ra có thể kết hợp với thuộc tính multiple để cho phép người dùng nhập vào cùng lúc nhiều email, các email cách nhau bởi dấu phẩy.

3. <input type="button">

Được sử dụng để hiển thị các nút nhấn đơn giản, nút có thể dùng CSS để thay đổi giao diện hiển thị. Thường được thiết kế để thực thi một chức năng chỉ định nào đó ở bất kỳ nơi nào của trang web với các sự kiện ràng buộc (phổ biến nhất là sự kiện nhấp chuột). Một ví dụ đơn giản về sự kết hợp giữa loại button với sự kiện nhấp chuột như đoạn code sau:

<!-- index.html -->
<html>
    <body>
<input type="button" onclick="alert('Hello World!')" value="Click here!">
    </body>
</html>

4. <input type="password">

Loại này cung cấp cho người dùng khung nhập mật khẩu một cách an toàn. Khi người dùng nhập vào thì văn bản sẽ bị che khuất và được thay thế vào bằng các ký tự như "*" hoặc ".". Ký tự thay thế này cũng có thể thay đổi tuỳ thuộc vào tác nhân người dùng và tuỳ thuộc vào hệ điều hành.
Thông thường loại password sẽ được sử dụng chung với phần tử <form> để tạo các giao diện đăng nhâp cho người dùng.

<!-- index.html -->
<html>
    <body>
    <form action = "" method = "">
        <label>Username:</label>
        <input type = "text" name = "username" />
        <label>Password:</label>
        <input type = "password" name = "password" />
        <input type = "submit" />
    </form>
    </body>
</html>

5. <input type="submit">

Cũng là loại nút nhấn đơn giản và tương tự như loại button. Trong đoạn code trong phần type=password. Khi người dùng nhấp chuột vào nút, đồng nghĩa với việc người dùng muốn gửi thông tin lên máy chủ. Trong phần tử input, nếu có thuộc tính value thì giá trị hiển thị trên nút sẽ là giá trị của value, nếu không có thuộc tính value thì nút sẽ hiển thị giá trị mặc định.
Tuỳ thuộc vào trình duyệt và ngôn ngữ hiển thị trên trình duyệt mà giá trị mặc định này sẽ thay đổi theo. Theo như tôi thử nghiệm thì trên Google Chrome (EN) sẽ là "submit", trên Firefox (EN) sẽ là Submit Query và Firefox (VN) là Gửi truy vấn, ... Đoạn code dưới đây sẽ trình bày 2 loại có và không có đi kèm với thuộc tính value. 

<!-- index.html -->
<html>
    <body>
    <form action = "" method = "">
        <input type = "sumit" />

        <input type = "submit" value = "Đăng nhập"/>
    </form>
    </body>
</html>

6. <input type="file">

Loại này cho phép người dùng chọn 1 hoặc nhiều file từ thiết bị của họ. Sau khi được chọn, các file này sẽ được gửi lên máy chủ nếu người dùng submit form hoặc bằng mã JavaScript. 

<!-- index.html -->
<html>
    <body>
    <form action = "" method = "">
        <label>Choose a file:</label>
            <input type="file" id="mfile" name="mfile" accept="image/png, image/jpeg">

        <label>Choose files:</label>
            <input type="file" id="mfiles" name="mfiles[]" multiple accept="image/png, image/jpeg">
    </form>
    </body>
</html>
Để hiểu rõ hơn về input file, hãy tham khảo bài viết:

7. <input type="hidden">

Cho phép người phát triển web đính kèm các dữ liệu, mà dữ liệu này người dùng không thể nhìn thấy và không thể sửa đổi khi gửi thông tin đi. Ví dụ: như ID của một sản phẩm đang được chỉnh sửa nội dung, hoặc  những mã bảo mật token.

<!-- index.html -->
<html>
    <body>
    <form action = "" method = "">
        <label>Full name</label>
            <input type="text" name="fullname" value="Elon Musk">

            <input type="hidden" id="user_id" name="user_id" value="iduser">
    </form>
    </body>
</html>

Còn tiếp!

Post a Comment

Previous Post Next Post