Nhập HTML:Hướng dẫn từng bước

<form>
	... Form elements ...
</form>

Bên trong thẻ là nơi lưu trữ các phần tử bên trong biểu mẫu. Các phần tử biểu mẫu có thể bao gồm các trường văn bản, nút gửi, nút radio, hộp văn bản nhiều dòng và các loại dữ liệu đầu vào khác được chấp nhận trong HTML.

Đầu vào HTML

Phần tử xác định trường biểu mẫu trong đó khách truy cập có thể gửi dữ liệu. hỗ trợ các trường như bộ chọn ngày, hộp kiểm, nút và trình tải lên tệp.

81% người tham gia cho biết họ cảm thấy tự tin hơn về triển vọng công việc công nghệ của mình sau khi tham gia một cuộc thi đào tạo. Kết hợp với bootcamp ngay hôm nay.

Sinh viên tốt nghiệp bootcamp trung bình đã dành ít hơn sáu tháng để chuyển đổi nghề nghiệp, từ khi bắt đầu bootcamp đến khi tìm được công việc đầu tiên của họ.

Cú pháp cho phần tử như sau:

<input type="inputType">

Phần tử chấp nhận một số thuộc tính, nhưng thuộc tính chính mà bạn phải chỉ định là thuộc tính type. Nếu bạn không chỉ định thuộc tính type, phần tử sẽ không xuất hiện trên trang web. Điều này là do phần tử trống theo mặc định.

Hãy xem qua một vài ví dụ để chứng minh cách hoạt động của thẻ HTML .

Chúng tôi đã được yêu cầu tạo một biểu mẫu cho một cửa hàng bánh mì và salad địa phương, Sue’s Salads. Biểu mẫu này sẽ cho phép khách hàng gửi phản hồi dựa trên trải nghiệm của họ tại cửa hàng. Biểu mẫu chúng tôi được yêu cầu tạo phải chấp nhận:

• Tên của khách hàng (dưới dạng văn bản)
• Hộp kiểm để cho biết liệu khách hàng có phải là người đăng ký chương trình khách hàng thân thiết của cửa hàng hay không (hộp kiểm)
• Xếp hạng 1-5 dựa trên trải nghiệm của khách hàng tại cửa hàng (dưới dạng một con số)

Các kiểu nhập HTML

Thẻ chấp nhận nhiều loại đầu vào. Loại đầu vào được chỉ định bằng thuộc tính “type”. Các kiểu nhập phổ biến bao gồm các nút, bộ chọn ngày, trường mật khẩu và trường văn bản.

Dưới đây là danh sách ngắn gọn các loại đầu vào điều khiển biểu mẫu phổ biến được sử dụng với thẻ :

nút
• tệp
hộp kiểm
• mật khẩu
• số
• đài phát thanh
• gửi
• văn bản (kiểu nhập văn bản)
• url
• ngày tháng (bộ chọn ngày và giờ)
• hình ảnh
• email (kiểm soát nhập địa chỉ email)

Các loại đầu vào Ví dụ HTML

Hãy tạo một vài trường biểu mẫu bằng thẻ HTML .

Trường văn bản

Phần tử được sử dụng để tạo trường văn bản trong HTML. Giả sử chúng ta muốn tạo một trường văn bản hỏi tên của khách hàng. Chúng tôi có thể làm như vậy bằng cách sử dụng mã này:

<input type="text" placeholder="What is your name?">

Trong mã của chúng tôi, chúng tôi đã tạo một trường văn bản với hai thuộc tính. Thuộc tính type được đặt thành văn bản, có nghĩa là biểu mẫu của chúng tôi có thể chấp nhận đầu vào văn bản. Thuộc tính giữ chỗ được gán giá trị Tên bạn là gì?

Văn bản này sẽ xuất hiện dưới dạng giá trị trình giữ chỗ cho đến khi người dùng bắt đầu nhập văn bản vào trường.

Mã của chúng tôi trả về:

<input type="text" placeholder="What is your name?">

Như bạn có thể thấy, chúng tôi đã tạo một trường văn bản với giá trị giữ chỗ What is your name?

Hộp kiểm

Trong HTML, các hộp kiểm được đánh dấu là đầu vào thuộc loại hộp kiểm:

<input type="checkbox" id="loyalty" name="loyalty" value="Yes"> 
<label for="loyalty">Are you a subscriber to our loyalty program?</label>

Mã này tạo một nút hộp kiểm hiển thị văn bản “Có”. Nếu hộp kiểm được nhấp vào, hộp kiểm đó sẽ được đánh dấu.

Hộp kiểm của chúng tôi có nhãn "Bạn có phải là người đăng ký chương trình khách hàng thân thiết của chúng tôi không?" Nếu bạn nhấp vào nhãn, hộp kiểm sẽ được chuyển đổi. Loại đầu vào nhãn rất cần thiết cho khả năng truy cập vì nó đảm bảo người đọc có thể dễ dàng tìm hiểu về nội dung của biểu mẫu.

Để tìm hiểu thêm về các nhãn HTML, hãy đọc hướng dẫn của chúng tôi về thẻ HTML .

Hộp kiểm có một số thuộc tính được liên kết với chúng.

• Thuộc tính loại. Loại đầu vào cần được đặt thành hộp kiểm.
• ID. Hãy nhớ rằng với ID, chúng phải là duy nhất đối với tệp của bạn.
• Tên và giá trị. Tên và giá trị hữu ích khi được gán để có thể xử lý dữ liệu được thu thập sau khi gửi biểu mẫu.
• Đã kiểm tra. Thuộc tính đã kiểm tra, vì nó không được gán cho bất kỳ thứ gì, được gọi là thuộc tính boolean. Đã kiểm tra ở đó có nghĩa là nó tự động được đặt thành true. Giá trị mặc định là false, vì vậy bạn chỉ phải đặt nó nếu bạn muốn hộp kiểm được chọn.

Các nút radio

Phần tử được sử dụng để tạo một nút radio trong HTML.

Thuật ngữ "nút radio" bắt nguồn từ ngành công nghiệp xe hơi, thật kỳ lạ. Dàn âm thanh trên ô tô từng có các nút bấm vật lý trong đó mỗi lần chỉ có thể ấn một nút. Nếu bạn ấn chọn một lựa chọn khác, nút trước đó sẽ bị bỏ chọn.

Sự khác biệt giữa việc sử dụng hộp kiểm và một tập hợp các nút radio là các nút radio chỉ cho phép bạn chọn một lựa chọn. Phần còn lại của các nút sẽ tắt sau khi bạn kiểm tra lựa chọn của mình, do đó không thể chọn nhiều nút radio. Mặt khác, hộp kiểm có thể có nhiều lựa chọn.

Để thay đổi đầu vào hộp kiểm thành đầu vào nút radio, bạn phải thực hiện hai việc. Đầu tiên, hãy thay đổi loại đầu vào thành radio. Cuối cùng, hãy đảm bảo rằng giá trị tên khớp trên tất cả các nút radio. Đây là chức năng vô hiệu hóa phần còn lại của các nút khi một nút được chọn.

Giả sử chúng tôi muốn tạo một trường hỏi liệu người dùng có phải là người đăng ký chương trình khách hàng thân thiết của Sue’s Salads hay không. Chúng tôi có thể tạo trường bằng mã này:

<label for="yes">Yes</label>
<input type="radio" value="yes" id="yes" />
<label for="no">No</label>
<input type="radio" value="no" id="no" />

Mã của chúng tôi trả về:

<label for="yes">Yes</label>
<input type="radio" value="yes" id="yes">
<label for="no">No</label>
<input type="radio" value="no" id="no">

Trong mã của chúng tôi, chúng tôi đã tạo hai nút radio. Nút radio đầu tiên được gán nhãn Có và có giá trị có. Nút radio thứ hai của chúng tôi được gán nhãn Không và có giá trị là số.

Trường số

Phần tử được sử dụng để chấp nhận đầu vào dạng số trong một biểu mẫu.

Giả sử chúng tôi muốn tạo một biểu mẫu yêu cầu khách hàng tại Sue’s Salads đánh giá trải nghiệm của họ tại cửa hàng. Khách hàng nên cung cấp cấp số từ 1 đến 5. Chúng tôi có thể tạo một biểu mẫu web thu thập dữ liệu này bằng cách sử dụng mã sau:

<label>How positive was your experience at Sue's Salads (between 1 and 5)?</label>
<input type="number" min="1" max="5" />

Mã của chúng tôi trả về:

<label>How positive was your experience at Sue's Salads (between 1 and 5)?</label>
<input type="number" min="1" max="5">

Chúng tôi đã tạo trường biểu mẫu chấp nhận bất kỳ số nào từ 1 đến 5. Trường này chỉ có thể chấp nhận số. Nếu người dùng cố gắng nhập bất kỳ văn bản nào vào trường, văn bản đó sẽ không được xử lý.

Ngoài ra, vì trường biểu mẫu này có kiểu số, hai mũi tên nhỏ xuất hiện bên trong hộp. Khi nhấp vào mũi tên lên, giá trị trong trường của chúng tôi sẽ tăng lên 1. Nếu nhấp vào mũi tên xuống, giá trị trong trường của chúng tôi sẽ giảm đi 1.

Kết luận

Thẻ HTML được sử dụng để chấp nhận đầu vào của người dùng trong một biểu mẫu. Thẻ có thể được sử dụng để chấp nhận các giá trị số, văn bản, ngày tháng, phản hồi có / không và các loại dữ liệu khác.

Hướng dẫn này đã thảo luận, có tham chiếu đến các ví dụ, cách sử dụng thẻ HTML và các thuộc tính có sẵn để sử dụng với thẻ . Bây giờ, bạn đã sẵn sàng để bắt đầu sử dụng thẻ để tạo các phần tử trường biểu mẫu giống như một chuyên gia HTML!

Nếu bạn muốn tìm hiểu thêm về HTML, hãy xem hướng dẫn đầy đủ của chúng tôi về cách học HTML.