Dưới sự phát triển không ngừng nghỉ của công nghệ, xu hướng tìm kiếm thông tin trực tuyến của con người cũng theo đó gia tăng. Thẻ input trong HTML là một công cụ hữu ích giúp cho bạn tối ưu hóa SEO cho website. Người sử dụng cũng dễ dàng tiếp cận với trang web. Show 1.1. Thẻ input trong HTML là gì? Thẻ input trong HTML được sử dụng khi bạn cần biểu diễn một trường input để có thể nhập dữ liệu vào đó. Các thông tin trên website mà người dùng có thể nhập vào ví dụ như họ tên, mật khẩu, số điện thoại, email… Bên cạnh đó, thẻ input còn được sử dụng để tạo các trường thông tin như ô đăng ký, ô đăng nhập, ô tìm kiếm, ô nhập thông tin tùy ý…  Thẻ input cung cấp nhiều thuộc tính giúp tối ưu hóa SEO của website. Các thuộc tính quan trong trong thẻ input có thể kể ra như: type, name, value, placeholder, required, pattern, autocomplete. Các phần tử <input> nằm bên trong 1 phần tử <form>, mục đích dùng để khai báo đầu vào ở những trường dữ liệu cho phép người dùng nhập thông tin. Tùy thuộc vào giá trị của thuộc tính type mà thẻ input có thể thay đổi theo nhiều cách khác nhau. Ví dụ thẻ input và kết quả: <form action="#"> First name: <input type="text" name="firstName" placeholder="enter firstname..."><br> Last name: <input type="text" name="lastName" placeholder="enter lastname..."><br> <input type="submit" value="Submit"> </form> 1.2. Thuộc tính của thẻ inputThẻ input có nhiều thuộc tính cho phép người dùng tùy chỉnh. Một số các thuộc tính phổ biến của thẻ input gồm có:
Bên cạnh các thuộc tính phổ biến kể trên, thẻ input còn có các thuộc tính khác là: accept, alt, height, list, multiple, pattern và width. 2. Lợi ích của thẻ input trong HTMLThẻ input mang đến rất nhiều lợi ích cho nhà phát triển:
3. Cấu trúc của thẻ inputThẻ input có cấu trúc như sau: <input type=”text” name=”firstname”> Trong đó:
4. Ví dụ về cách sử dụng thẻ input fileĐể có được cái nhìn rõ nét hơn về cách sử dụng thẻ input file, chúng ta hãy cùng xem 2 ví dụ cụ thể dưới đây. 4.1. Sử dụng thẻ input để tạo biểu mẫuSử dụng thẻ input trong HTML là cách thường thấy nhất. Bạn có thể tạo ra nhiều biểu mẫu dùng để đăng ký hay thanh toán trực tiếp. Ví dụ cụ thể: <form action="/register" method="post"> <label for="firstname">Họ tên:</label><br> <input type="text" id="firstname" name="firstname"><br> <label for="email">Email:</label><br> <input type="email" id="email" name="email"><br> <label for="password">Mật khẩu:</label><br> <input type="password" id="password" name="password"><br><br> <input type="submit" value="Đăng ký"> </form> Trong đó:
4.2. Sử dụng thẻ input để tạo ô trong tìm kiếmChúng ta hãy cùng tìm hiểu cách sử dụng thẻ input qua ví dụ đoạn mã sau: <form action="/tim-kiem" method="get"> <label for="search">Tìm kiếm:</label> <input type="text" id="search" name="search" placeholder="Nhập từ khóa tìm kiếm"> <button type="submit">Tìm kiếm</button> </form> Trong đoạn mã ở trên, ta thấy có:
5. Lời KếtViệc tối ưu SEO cho website không chỉ phụ thuộc vào từ khóa, tiêu đề, thẻ meta, liên kết đến trang web, mà còn bao gồm cả việc dùng thẻ inputrong HTML. Bạn có quyền tùy chỉnh các thuộc tính và giá trị của input file cho phù hợp với trang web của mình. |
