Bạn đang xem : lớp đầu vào html php

HTML

Loại đầu vào

Chương này mô tả các loại khác nhau cho phần tử HTML & lt; input & gt; .

Các kiểu nhập HTML

Dưới đây là các loại đầu vào khác nhau mà bạn có thể sử dụng trong HTML:

  • & lt; input type = "button" & gt;
  • & lt; input type = "checkbox" & gt;
  • & lt; input type = "color" & gt;
  • & lt; input type = "date" & gt;
  • & lt; input type = "datetime-local" & gt;
  • & lt; input type = "email" & gt;
  • & lt; input type = "file" & gt;
  • & lt; input type = "hidden" & gt;
  • & lt; input type = "image" & gt;
  • & lt; input type = "month" & gt;
  • & lt; input type = "number" & gt;
  • & lt; input type = "password" & gt;
  • & lt; input type = "radio" & gt;
  • & lt; input type = "range" & gt;
  • & lt; input type = "reset" & gt;
  • & lt; input type = "search" & gt;
  • & lt; input type = "submit" & gt;
  • & lt; input type = "tel" & gt;
  • & lt; input type = "text" & gt;
  • & lt; input type = "time" & gt;
  • & lt; input type = "url" & gt;
  • & lt; input type = "week" & gt;

Mẹo: Giá trị mặc định của thuộc tính type

“văn bản”.

Văn bản kiểu nhập

& lt; input type = "text" & gt; xác định một
trường nhập văn bản một dòng
:

Đây là cách mã HTML ở trên sẽ được hiển thị trong trình duyệt:

Tên:

Họ:

Mật khẩu loại nhập

Tên: Họ:

& lt; input type = "password" & gt; xác định trường mật khẩu :

Đây là cách mã HTML ở trên sẽ được hiển thị trong trình duyệt:

Tên người dùng:

Mật khẩu:

Các ký tự trong trường mật khẩu được che đi (được hiển thị dưới dạng dấu hoa thị hoặc vòng tròn).

Gửi loại đầu vào

Tên người dùng: Mật khẩu:

& lt; input type = "submit" & gt; xác định một nút cho
gửi
dữ liệu biểu mẫu tới trình xử lý biểu mẫu .

Trình xử lý biểu mẫu thường là một trang máy chủ có tập lệnh để xử lý
dữ liệu đầu vào.

Trình xử lý biểu mẫu được chỉ định trong hành động của biểu mẫu
thuộc tính:

Đây là cách mã HTML ở trên sẽ được hiển thị trong trình duyệt:

Tên:

Họ:

Nếu bạn bỏ qua thuộc tính giá trị của nút gửi, nút sẽ nhận được văn bản mặc định:

Đặt lại kiểu đầu vào

& lt; input type = "reset" & gt; xác định nút đặt lại
điều đó sẽ đặt lại tất cả các giá trị biểu mẫu về giá trị mặc định của chúng:

Đây là cách mã HTML ở trên sẽ được hiển thị trong trình duyệt:

Tên:

Họ:

Nếu bạn thay đổi các giá trị đầu vào và sau đó nhấp vào nút “Đặt lại”, dữ liệu biểu mẫu sẽ được đặt lại về giá trị mặc định.

Radio loại đầu vào

& lt; input type = "radio" & gt; xác định nút radio .

Các nút radio cho phép người dùng CHỈ chọn MỘT trong số các lựa chọn giới hạn:

Ví dụ

& lt; p & gt; Chọn ngôn ngữ Web yêu thích của bạn: & lt; / p & gt;

& lt; form & gt;
& lt; input type = “radio” id = “html” name = “fav_language”
value = “HTML” & gt;
& lt; label for = “html” & gt; HTML & lt; / label & gt; & lt; br & gt;
& lt; input
type = “radio” id = “css” name = “fav_language” value = “CSS” & gt;
& lt; label
for = “css” & gt; CSS & lt; / label & gt; & lt; br & gt;
& lt; input type = “radio” id = “javascript”
name = “fav_language” value = “JavaScript” & gt;
& lt; label for = “javascript” & gt; JavaScript & lt; / label & gt;
& lt; / form & gt;

Hãy tự mình thử »

Đây là cách mã HTML ở trên sẽ được hiển thị trong trình duyệt:

HTML

CSS

JavaScript

Hộp kiểm loại đầu vào

& lt; input type = "checkbox" & gt; xác định hộp kiểm .

Hộp kiểm cho phép người dùng chọn KHÔNG hoặc NHIỀU tùy chọn trong số các lựa chọn giới hạn.

Ví dụ

& lt; form & gt;
& lt; input type = “checkbox” id = “car1” name = “car1” value = “Bike” & gt;
& lt; nhãn cho = “xe1” & gt; Tôi có một chiếc xe đạp & lt; / label & gt; & lt; br & gt;
& lt; input
type = “checkbox” id = “car2” name = “car2” value = “Car” & gt;
& lt; label for = “car2” & gt;
Tôi có một chiếc ô tô & lt; / label & gt; & lt; br & gt;
& lt; input type = “checkbox”
id = “xe3” name = “xe3”
value = “Boat” & gt;
& lt; label for = “car3” & gt; Tôi có một chiếc thuyền & lt; / label & gt;
& lt; / form & gt;

Xem Thêm  Dự án học máy đầu tiên của bạn bằng Python từng bước - học máy trăn đơn giản

Hãy tự mình thử »

Đây là cách mã HTML ở trên sẽ được hiển thị trong trình duyệt:

Tôi có một chiếc xe đạp

Tôi có một chiếc ô tô

Tôi có một chiếc thuyền

Nút loại đầu vào

& lt; input type = "button" & gt; xác định nút :

Đây là cách mã HTML ở trên sẽ được hiển thị trong trình duyệt:

Màu loại đầu vào

& lt; input type = "color" & gt; được sử dụng cho các trường nhập phải chứa màu.

Tùy thuộc vào sự hỗ trợ của trình duyệt, bộ chọn màu có thể hiển thị trong trường nhập.

Ví dụ

& lt; form & gt;
& lt; label for = “favcolor” & gt; Chọn mục yêu thích của bạn
color: & lt; / label & gt;
& lt; input type = “color” id = “favcolor” name = “favcolor” & gt;
& lt; / form & gt;

Hãy tự mình thử »

Ngày nhập loại

& lt; input type = "date" & gt; được sử dụng cho các trường nhập phải chứa ngày tháng.

Tùy thuộc vào sự hỗ trợ của trình duyệt, bộ chọn ngày có thể hiển thị trong trường nhập liệu.

Bạn cũng có thể sử dụng các thuộc tính min max để thêm hạn chế cho ngày tháng:

Ví dụ

& lt; form & gt;
& lt; label for = “datemax” & gt; Nhập ngày trước
1980-01-01: & lt; / label & gt;
& lt; input type = “date” id = “datemax” name = “datemax”
max = “1979-12-31” & gt; & lt; br & gt; & lt; br & gt;
& lt; label for = “datemin” & gt; Nhập ngày sau
2000-01-01: & lt; / label & gt;
& lt; input type = “date” id = “datemin” name = “datemin”
min = “2000-01-02” & gt;
& lt; / form & gt;

Hãy tự mình thử »

Kiểu nhập Datetime-local

& lt; input type = "datetime-local" & gt; chỉ định
trường nhập ngày và giờ, không có múi giờ.

Tùy thuộc vào sự hỗ trợ của trình duyệt, bộ chọn ngày có thể hiển thị trong trường nhập liệu.

Ví dụ

& lt; form & gt;
& lt; label for = “birthdaytime” & gt; Birthday (ngày và
time): & lt; / label & gt;
& lt; input type = “datetime-local” id = “birthdaytime” name = “birthdaytime” & gt;
& lt; / form & gt;

Hãy tự mình thử »

Loại đầu vào Email

& lt; input type = "email" & gt; được sử dụng cho các trường nhập phải chứa địa chỉ e-mail.

Tùy thuộc vào sự hỗ trợ của trình duyệt, địa chỉ e-mail có thể được xác thực tự động khi được gửi.

Một số điện thoại thông minh nhận dạng được loại email và thêm “.com” vào bàn phím để khớp với cách nhập email.

Ví dụ

& lt; form & gt;
& lt; label for = “email” & gt; Nhập email của bạn: & lt; / label & gt;
& lt; input type = “email” id = “email” name = “email” & gt;
& lt; / form & gt;

Hãy tự mình thử »

Tệp loại đầu vào

& lt; input type = "file" & gt;
xác định trường chọn tệp và nút “Duyệt qua” để tải tệp lên.

Ví dụ

& lt; form & gt;
& lt; label for = “myfile” & gt; Chọn tệp: & lt; / label & gt;
& lt; input type = “file” id = “myfile” name = “myfile” & gt;
& lt; / form & gt;

Hãy tự mình thử »

Loại đầu vào bị ẩn

& lt; input type = "hidden" & gt;
xác định trường nhập ẩn (không hiển thị với người dùng).

Một trường ẩn cho phép các nhà phát triển web bao gồm dữ liệu không thể nhìn thấy hoặc
được người dùng sửa đổi khi gửi biểu mẫu.

Một trường ẩn thường lưu trữ bản ghi cơ sở dữ liệu nào cần được cập nhật
khi biểu mẫu được gửi.

Lưu ý: Mặc dù giá trị không được hiển thị cho người dùng trong
nội dung của trang, nó hiển thị (và có thể được chỉnh sửa) bằng cách sử dụng bất kỳ nhà phát triển trình duyệt nào
công cụ hoặc chức năng “Xem Nguồn”. Không sử dụng đầu vào ẩn dưới dạng
bảo mật!

Loại đầu vào Tháng

& lt; input type = "month" & gt; cho phép người dùng chọn một tháng và năm.

Xem Thêm  W3schools Left Outer Tham gia thông tin đăng nhập, tài khoản - w3schools sql còn lại tham gia

Tùy thuộc vào sự hỗ trợ của trình duyệt, bộ chọn ngày có thể hiển thị trong trường nhập liệu.

Ví dụ

& lt; form & gt;
& lt; label for = “bdaymonth” & gt; Birthday (tháng và
năm): & lt; / label & gt;
& lt; input type = “month” id = “bdaymonth” name = “bdaymonth” & gt;
& lt; / form & gt;

Hãy tự mình thử »

Số loại đầu vào

& lt; input type = "number" & gt; xác định một
trường nhập số
.

Bạn cũng có thể đặt giới hạn về những con số được chấp nhận.

Ví dụ sau hiển thị trường nhập số, nơi bạn có thể nhập giá trị từ 1 đến 5:

Ví dụ

& lt; biểu mẫu & gt;
& lt; nhãn cho = “số lượng” & gt; Số lượng (từ 1 đến
5): & lt; / label & gt;
& lt; input type = “number” id = “quant” name = “số lượng”
min = “1” max = “5” & gt;
& lt; / form & gt;

Hãy tự mình thử »

Hạn chế đầu vào

Dưới đây là danh sách một số hạn chế đầu vào phổ biến:

Thuộc tính
Sự mô tả

đã kiểm tra
Chỉ định rằng một trường đầu vào sẽ được chọn trước khi tải trang (đối với loại = “hộp kiểm” hoặc loại = “radio”)

Vô hiệu hóa
Chỉ định rằng một trường đầu vào sẽ bị vô hiệu hóa

tối đa
Chỉ định giá trị lớn nhất cho một trường đầu vào

maxlength
Chỉ định số ký tự tối đa cho một trường đầu vào

min
Chỉ định giá trị nhỏ nhất cho một trường đầu vào

họa tiết
Chỉ định một biểu thức chính quy để kiểm tra giá trị đầu vào

chỉ đọc
Chỉ định rằng một trường đầu vào là chỉ đọc (không thể thay đổi)

yêu cầu
Chỉ định rằng một trường đầu vào là bắt buộc (phải được điền)

kích thước
Chỉ định chiều rộng (tính bằng ký tự) của một trường đầu vào

bươc
Chỉ định khoảng số hợp pháp cho một trường đầu vào

giá trị
Chỉ định giá trị mặc định cho một trường đầu vào

Bạn sẽ tìm hiểu thêm về các hạn chế đầu vào trong chương tiếp theo.

Ví dụ sau đây hiển thị một trường nhập số, nơi bạn có thể nhập
giá trị từ 0 đến 100, trong các bước 10. Giá trị mặc định là 30:

Dải loại đầu vào

& lt; input type = "range" & gt; xác định điều khiển để nhập một số có giá trị chính xác không quan trọng (như điều khiển thanh trượt). Mặc định
phạm vi là 0 đến 100. Tuy nhiên, bạn có thể đặt giới hạn về những gì
các số được chấp nhận với min , max bước < / code> thuộc tính:

Ví dụ

& lt; biểu mẫu & gt;
& lt; label for = "vol" & gt; Âm lượng (từ 0 đến 50): & lt; / label & gt;
& lt; input type = "range" id = "vol" name = "vol" min = "0" max = "50" & gt;
& lt; / form & gt;

Hãy tự mình thử »

Tìm kiếm kiểu nhập

& lt; input type = "search" & gt; được sử dụng cho các trường tìm kiếm (trường tìm kiếm hoạt động giống trường văn bản thông thường).

Loại đầu vào Tel

& lt; input type = "tel" & gt; được sử dụng cho các trường nhập phải chứa số điện thoại.

Ví dụ

& lt; form & gt;
& lt; label for = "phone" & gt; Nhập số điện thoại của bạn: & lt; / label & gt;
& lt; input type = "tel" id = "phone" name = "phone"
pattern = "[0-9] {3} - [0-9] {2} - [0-9] {3}" & gt;
& lt; / form & gt;

Hãy tự mình thử »

Thời gian loại đầu vào

& lt; input type = "time" & gt; cho phép người dùng chọn thời gian (không tính múi giờ).

Tùy thuộc vào sự hỗ trợ của trình duyệt, bộ chọn thời gian có thể hiển thị trong trường nhập liệu.

Ví dụ

& lt; form & gt;
& lt; label for = "appt" & gt; Chọn thời gian: & lt; / label & gt;
& lt; input type = "time" id = "appt" name = "appt" & gt;
& lt; / form & gt;

Hãy tự mình thử »

Url loại đầu vào

& lt; input type = "url" & gt; được sử dụng cho các trường nhập phải chứa địa chỉ URL.

Tùy thuộc vào sự hỗ trợ của trình duyệt, trường url có thể được xác thực tự động
khi được gửi.

Một số điện thoại thông minh nhận ra loại url và thêm ".com" vào bàn phím để khớp
đầu vào url.

Ví dụ

& lt; form & gt;
& lt; label for = "Home" & gt; Thêm trang chủ của bạn: & lt; / label & gt;
& lt; input type = "url" id = "Home" name = "Home" & gt;
& lt; / form & gt;

Hãy tự mình thử »

Tuần loại đầu vào

& lt; input type = "week" & gt; cho phép người dùng chọn một tuần và năm.

Tùy thuộc vào sự hỗ trợ của trình duyệt, bộ chọn ngày có thể hiển thị trong trường nhập liệu.

Ví dụ

& lt; form & gt;
& lt; label for = "week" & gt; Chọn một tuần: & lt; / label & gt;
& lt; input type = "week" id = "week" name = "week" & gt;
& lt; / form & gt;

Hãy tự mình thử »

Bài tập HTML

Tự kiểm tra bằng các bài tập

Bài tập:

Trong biểu mẫu bên dưới, hãy thêm trường nhập văn bản, với tên "tên người dùng".

& lt; form action = "/ action_page.php" & gt;

& lt; & gt;

& lt; / form & gt;

Bắt đầu bài tập

Thuộc tính loại đầu vào HTML

Nhãn
Sự mô tả

& lt; input type = "" & gt;
Chỉ định loại đầu vào để hiển thị


Xem thêm những thông tin liên quan đến chủ đề lớp đầu vào html php

PHP Basics: HTML Forms & PHP Form Handling

  • Tác giả: PartiallyDeveloped
  • Ngày đăng: 2011-03-27
  • Đánh giá: 4 ⭐ ( 9476 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: In this video I discuss the very basics of HTML form handling. I discuss the inputs of an HTML form, and a couple of different types. With this I discuss the attributes of type, name, and value. This is only very briefly covered, for beginners. If you would like more information, keep posted on my YouTube channel as I may make a more advanced tutorial on it (if it is popular enough), but in the meantime check out this link: http://www.w3schools.com/html/html_forms.asp

    The PHP in this tutorial again is based on beginner programmers. I discuss the GET / POST functions which are used to store information in $_GET / $_POST based on the method of the input. I demonstrate slightly how these can be used to make a simple application where a name is echoed based on user input. Again, this is very basic; if it is suggested frequently enough and the interest is high, I will make a more advanced video. Please stay tuned for that!

KẾT HỢP PHP VÀ HTML

  • Tác giả: www.itplus-academy.edu.vn
  • Đánh giá: 3 ⭐ ( 4408 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: PHP là một ngôn ngữ dành cho lập trình web. Như vậy, ta có thể suy ra là PHP và HTML sẽ phải đi cùng với nhau. Ở trong bài học hôm nay, chúng ta sẽ cùng đi tìm hiểu làm thế nào để có thể kết hợp được mã PHP và HTML lại với nhau.

Model View Controller (MVC) trong PHP

  • Tác giả: t3h.edu.vn
  • Đánh giá: 5 ⭐ ( 6503 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Vậy MVC là gì, khái niệm ra sao và cách chúng hoạt động như thế nào? Cùng T3H tìm hiểu về MVC trong PHP qua bài viết này bạn nhé!

Xây dựng ứng dụng đơn giản với Framework PHP Symfony

  • Tác giả: viblo.asia
  • Đánh giá: 5 ⭐ ( 6233 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tuần vừa qua mình mới join vào dự án ec-cube là một cms xây dựng dựa trên symfony framework, trong bài viết này mình sẽ hướng dẫn các bạn xây dựng ứng dụng CRUD cơ bản. Giới thiệu Symfony is a set of...

Học php và bước đầu vào thế giới lập trình website

  • Tác giả: lar.edu.vn
  • Đánh giá: 4 ⭐ ( 2379 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: PHP là gì ? viết tắt là Personal Home Page trang web cá nhân ? Cũng đúng vì nó mục đích đầu tiên ra mắt là vậy, phục vụ cho cá nhân thôi, mà nhiều cá nhân gộp lại nên nó phát triển hơn vũ bão thành

Tổng hợp căn bản về học lập trình PHP cho người mới bắt đầu (p1)

  • Tác giả: tuandc.com
  • Đánh giá: 5 ⭐ ( 2428 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

PHP và HTML: Những điều bạn nên biết vào năm 2020

  • Tác giả: tecktrending.com
  • Đánh giá: 5 ⭐ ( 5189 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

By ads_php