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">
<!-- 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">
<!-- 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">
<!-- index.html -->
<html>
<body>
<form action = "" method = "">
<input type = "sumit" />
<input type = "submit" value = "Đăng nhập"/>
</form>
</body>
</html>6. <input type="file">
<!-- 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>7. <input type="hidden">
<!-- 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>