Tất tần tật thông tin bạn cần biết về thẻ input trong HTML

1. Tổng quan về thẻ input trong HTML

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.

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ẻ input

Thẻ 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ó:

• Thuộc tính type: bao gồm các giá trị như text, password, email, date, tel, file… Type là thuộc tính quan trọng nhất và không thể thiếu của thẻ input. Thuộc tính type giúp bạn xác định được kiểu dữ liệu cho phép của ô nhập đầu vào. 
• Thuộc tính value: giúp bạn xác định giá trị mặc định của ô đầu vào của trang web.
• Thuộc tính name trong thẻ input: được dùng để đặt tên cho ô đầu vào, để xác định trường dữ liệu sau khi người sử dụng submit thông tin.
• Thuộc tính placeholder: dùng để đặt 1 văn bản mẫu cho ô đầu vào, từ đó người dùng biết được nội dung cần phải nhập vào ô. 
• Thuộc tính required: khi sử dụng thuộc tính này, hệ thống sẽ ghi nhận đây là ô dữ liệu bắt buộc phải nhập trước khi submit file html.
• Thuộc tính disabled: nếu giá trị thuộc tính là true, đồng nghĩa với việc người dùng sẽ không thể nhập dữ liệu vào ô này.
• Thuộc tính readonly: nếu giá trị thuộc tính là true, dữ liệu của ô đầu vào sẽ được hiển thị, tuy nhiên người dùng sẽ không chỉnh sửa được giá trị này.
• Thuộc tính size: được dùng để xác định độ rộng của ô đầu vào, thuộc tính size sử dụng đơn vị là số ký tự.
• Thuộc tính max-length: bạn sử dụng để các định số lượng ký tự tối đa mà người dùng được phép nhập vào ô.
• Thuộc tính min và max: dùng để xác định giá trị tối thiểu và tối đa khi nhập ô đầu vào.
• Thuộc tính autocomplete: gợi ý các giá trị lựa chọn để người dùng nhập dữ liệu nhanh và dễ dàng hơn.
• Thuộc tính step: thường được sử dụng trong các loại ô nhập số, dùng để xác định giá trị bước nhảy của ô.

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 HTML

Thẻ input mang đến rất nhiều lợi ích cho nhà phát triển:

• Tạo được nhiều trường dữ liệu đa dạng như ô đơn, văn bản, nút checkbox, danh sách thả xuống… 
• Kiểm soát dữ liệu, giảm thiểu lỗi sai khi người dùng nhập dữ liệu ô đầu vào
• Kiểm soát giá trị nhập vào ô, giảm thiểu dữ liệu rác và đảm bảo các giá trị được nhập vào đúng với quy định và yêu cầu của website.
• Thẻ input cho phép bạn có thể tích hợp cùng với các công nghệ như jQuery, JavaScript. Việc tích hợp html input giúp trang web linh hoạt, sinh động và tăng tương tác từ người dùng.

3. Cấu trúc của thẻ input 

Thẻ input có cấu trúc như sau:

<input type=”text” name=”firstname”>

Trong đó:

• Thuộc tính type dùng để xác định loại ô đầu vào. Theo như mẫu cấu trúc ở trên thì loại ô đầu vào là “text”. Ngoài kiểu text thì bạn cũng có thể lựa chọn các loại dữ liệu khác như password, email, date, tel…
• Thuộc tính name bạn dùng để đặt tên cho ô đầu vào

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ẫu

Sử 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 đó:

• Bạn sử dụng thẻ input để tạo 3 ô dữ liệu đầu vào gồm có: họ tên, email và mật khẩu. Loại ô đầu vào được xác định qua thuộc tính type.
• Trong đoạn code ví dụ, chúng ta dùng phần tử submit để tạo nút đăng ký. Sau khi người dùng nhập thông tin đầu vào, sẽ nhấn nút đăng ký để xác nhận hoàn thành và gửi form về hệ thống.

4.2. Sử dụng thẻ input để tạo ô trong tìm kiếm

Chú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ó:

• Thẻ form dùng để bao quanh ô và nút tìm kiếm
• Thuộc tính action dùng để xác định đường dẫn đến trang đích khi người dùng thực hiện tìm kiếm
• Thuộc tính method giúp bạn xác định cách thức gửi dữ liệu, phương thức get để lấy dữ liệu về.
• Thuộc tính type=”text” dùng để xác định loại  ô input đầu vào cho người dùng nhập tìm kiếm
• Thuộc tính placeholder để xác định nội dung mô tả của ô tìm kiếm
• Thẻ button để tạo nút tìm kiếm, loại nút là type=”submit”

5. Lời Kết

Việ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. 

Nếu bạn đang quan tâm đến lập trình web thì hãy tham khảo ngay khóa học lập trình web tại ICANTECH nhé

Nguồn ảnh: ICANTECH.