Nút HTML tải hình ảnh

Question

Trong bài viết này, chúng ta sẽ tìm hiểu cách tạo một nút hình ảnh trong HTML bằng cách sử dụng một số CSS. Thông thường, chúng ta sẽ thấy văn bản trên một nút, nhưng trong bài viết này, chúng tôi sẽ tạo một nút hình ảnh trong HTML

Nội dung chính Show

Tạo nút hình ảnh trong HTML
Tạo kiểu với CSS
thuộc tính bổ sung
sự hình thành
định dạng
phương pháp tạo hình
formnovalidate
mục tiêu biểu mẫu
Chiều cao
chiều rộng
Thuộc tính lỗi thời
sử dụng bản đồ
Sử dụng đầu vào hình ảnh
Các tính năng nhập hình ảnh cần thiết
Ghi đè các hành vi biểu mẫu mặc định
Sử dụng các điểm dữ liệu x và y
Điều chỉnh vị trí của hình ảnh và thuật toán chia tỷ lệ
Một hình thức đăng nhập
Điều chỉnh vị trí hình ảnh và tỷ lệ

Có một hình ảnh dưới dạng nút đôi khi tốt hơn vì hình ảnh hấp dẫn trực quan hơn và đôi khi nó gửi một thông điệp rõ ràng hơn văn bản

Chúng ta có thể biến một hình ảnh thành nút theo hai cách đơn giản. Đầu tiên, chúng ta có thể sử dụng thẻ và đặt một

Chúng tôi đã sử dụng thẻ có thuộc tính loại là email. Trong nút gửi của bản tin, chúng tôi đã sử dụng một hình ảnh và thêm một số hiệu ứng di chuột thú vị. Như bạn có thể thấy, hình ảnh xoay 360 độ khi con trỏ chuột di chuyển qua nó

Tạo nút hình ảnh trong HTML

Trước tiên hãy thiết lập chỉ mục của chúng tôi. html và thêm cấu trúc. Sau đó, chúng tôi sẽ thêm một số CSS để làm cho nó trông đẹp hơn

Đó là một mã HTML đơn giản. Bên trong thẻ body, chúng tôi sẽ sử dụng thẻ div và đặt mọi thứ chúng tôi cần vào bên trong nó. Cách tốt nhất là giữ cho mã của bạn được tổ chức như thế này và nó cũng sẽ làm cho phần tử nút và hình ảnh trở thành khối vì div là phần tử khối, vì vậy mọi thứ bên trong nó cũng sẽ trở thành khối

Subscribe To Newsletter

Bên trong div, chúng ta sẽ thêm trường email để lấy email của người dùng

Để tạo một nút hình ảnh trong HTML, chúng tôi sẽ sử dụng

Tạo kiểu với CSS

Sau khi thiết lập cấu trúc của biểu mẫu đăng ký bản tin của chúng tôi, đã đến lúc tạo kiểu cho nó bằng CSS và tạo cho nó một số hình ảnh hấp dẫn

Chúng tôi đang thêm CSS để hoàn tác một số CSS được áp dụng theo mặc định, như lề, phần đệm và các thuộc tính như đường viền, giao diện và màu nền được áp dụng mặc định cho thành phần nút


button {
  border: none;
  cursor: pointer;
  appearance: none;
  background-color: inherit;
}
Chúng tôi cũng muốn thêm một số CSS của mình, chẳng hạn như chúng tôi muốn có hiệu ứng di chuột và chúng tôi muốn căn giữa nút
 Các phần tử 
<form>
  <p>Login to your accountp>
  <div>
    <label for="userId">User IDlabel>
    <input type="text" id="userId" name="userId" />
  div>
  <div>
    <label for="pwd">Passwordlabel>
    <input type="password" id="pwd" name="pwd" />
  div>
  <div>
    <input
      id="image"
      type="image"
      src="https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png"
      alt="Login"
      width="100" />
  div>
form>
7 thuộc loại <form>
  <p>Login to your accountp>
  <div>
    <label for="userId">User IDlabel>
    <input type="text" id="userId" name="userId" />
  div>
  <div>
    <label for="pwd">Passwordlabel>
    <input type="password" id="pwd" name="pwd" />
  div>
  <div>
    <input
      id="image"
      type="image"
      src="https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png"
      alt="Login"
      width="100" />
  div>
form>
8 được sử dụng để tạo các nút gửi đồ họa, i. e. gửi các nút có dạng hình ảnh thay vì văn bản
Thử nó
Giá trị
Phần tử 
<form>
  <p>Login to your accountp>
  <div>
    <label for="userId">User IDlabel>
    <input type="text" id="userId" name="userId" />
  div>
  <div>
    <label for="pwd">Passwordlabel>
    <input type="password" id="pwd" name="pwd" />
  div>
  <div>
    <input
      id="image"
      type="image"
      src="https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png"
      alt="Login"
      width="100" />
  div>
form>
9 không chấp nhận thuộc tính <form>
  <p>Login to your accountp>
  <div>
    <label for="userId">User IDlabel>
    <input type="text" id="userId" name="userId" />
  div>
  <div>
    <label for="pwd">Passwordlabel>
    <input type="password" id="pwd" name="pwd" />
  div>
  <div>
    <input
      id="image"
      type="image"
      src="https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png"
      alt="Login"
      width="100" />
  div>
form>
0. Đường dẫn đến hình ảnh được hiển thị được chỉ định trong thuộc tính <form>
  <p>Login to your accountp>
  <div>
    <label for="userId">User IDlabel>
    <input type="text" id="userId" name="userId" />
  div>
  <div>
    <label for="pwd">Passwordlabel>
    <input type="password" id="pwd" name="pwd" />
  div>
  <div>
    <input
      id="image"
      type="image"
      src="https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png"
      alt="Login"
      width="100" />
  div>
form>
1
thuộc tính bổ sung
Ngoài các thuộc tính được chia sẻ bởi tất cả các phần tử 
<form>
  <p>Login to your accountp>
  <div>
    <label for="userId">User IDlabel>
    <input type="text" id="userId" name="userId" />
  div>
  <div>
    <label for="pwd">Passwordlabel>
    <input type="password" id="pwd" name="pwd" />
  div>
  <div>
    <input
      id="image"
      type="image"
      src="https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png"
      alt="Login"
      width="100" />
  div>
form>
7, đầu vào nút <form>
  <p>Login to your accountp>
  <div>
    <label for="userId">User IDlabel>
    <input type="text" id="userId" name="userId" />
  div>
  <div>
    <label for="pwd">Passwordlabel>
    <input type="password" id="pwd" name="pwd" />
  div>
  <div>
    <input
      id="image"
      type="image"
      src="https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png"
      alt="Login"
      width="100" />
  div>
form>
8 hỗ trợ các thuộc tính sau
thay thế
Thuộc tính 
<form>
  <p>Login to your accountp>
  <div>
    <label for="userId">User IDlabel>
    <input type="text" id="userId" name="userId" />
  div>
  <div>
    <label for="pwd">Passwordlabel>
    <input type="password" id="pwd" name="pwd" />
  div>
  <div>
    <input
      id="image"
      type="image"
      src="https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png"
      alt="Login"
      width="100" />
  div>
form>
2 cung cấp một chuỗi thay thế để sử dụng làm nhãn của nút nếu hình ảnh không thể hiển thị (do lỗi, tác nhân người dùng không thể hoặc được định cấu hình để không hiển thị hình ảnh hoặc nếu người dùng đang sử dụng thiết bị đọc màn hình). Nếu được cung cấp, nó phải là một chuỗi không trống thích hợp làm nhãn cho nút
Ví dụ: nếu bạn có một nút đồ họa hiển thị hình ảnh có biểu tượng và/hoặc văn bản hình ảnh "Đăng nhập ngay", bạn cũng nên đặt thuộc tính 
<form>
  <p>Login to your accountp>
  <div>
    <label for="userId">User IDlabel>
    <input type="text" id="userId" name="userId" />
  div>
  <div>
    <label for="pwd">Passwordlabel>
    <input type="password" id="pwd" name="pwd" />
  div>
  <div>
    <input
      id="image"
      type="image"
      src="https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png"
      alt="Login"
      width="100" />
  div>
form>
2 thành thứ gì đó như <form>
  <p>Login to your accountp>
  <div>
    <label for="userId">User IDlabel>
    <input type="text" id="userId" name="userId" />
  div>
  <div>
    <label for="pwd">Passwordlabel>
    <input type="password" id="pwd" name="pwd" />
  div>
  <div>
    <input
      id="image"
      type="image"
      src="https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png"
      alt="Login"
      width="100" />
  div>
form>
4
Ghi chú. Mặc dù thuộc tính 
<form>
  <p>Login to your accountp>
  <div>
    <label for="userId">User IDlabel>
    <input type="text" id="userId" name="userId" />
  div>
  <div>
    <label for="pwd">Passwordlabel>
    <input type="password" id="pwd" name="pwd" />
  div>
  <div>
    <input
      id="image"
      type="image"
      src="https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png"
      alt="Login"
      width="100" />
  div>
form>
2 là tùy chọn về mặt kỹ thuật, nhưng bạn phải luôn thêm một thuộc tính để tối đa hóa khả năng sử dụng nội dung của mình
Về mặt chức năng, thuộc tính 
<form>
  <p>Login to your accountp>
  <div>
    <label for="userId">User IDlabel>
    <input type="text" id="userId" name="userId" />
  div>
  <div>
    <label for="pwd">Passwordlabel>
    <input type="password" id="pwd" name="pwd" />
  div>
  <div>
    <input
      id="image"
      type="image"
      src="https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png"
      alt="Login"
      width="100" />
  div>
form>
2 của phần tử <form>
  <p>Login to your accountp>
  <div>
    <label for="userId">User IDlabel>
    <input type="text" id="userId" name="userId" />
  div>
  <div>
    <label for="pwd">Passwordlabel>
    <input type="password" id="pwd" name="pwd" />
  div>
  <div>
    <input
      id="image"
      type="image"
      src="https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png"
      alt="Login"
      width="100" />
  div>
form>
9 hoạt động giống như thuộc tính <form>
  <p>Login to your accountp>
  <div>
    <label for="userId">User IDlabel>
    <input type="text" id="userId" name="userId" />
  div>
  <div>
    <label for="pwd">Passwordlabel>
    <input type="password" id="pwd" name="pwd" />
  div>
  <div>
    <input
      id="image"
      type="image"
      src="https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png"
      alt="Login"
      width="100" />
  div>
form>
2 trên phần tử <form>
  <p>Login to your accountp>
  <div>
    <label for="userId">User IDlabel>
    <input type="text" id="userId" name="userId" />
  div>
  <div>
    <label for="pwd">Passwordlabel>
    <input type="password" id="pwd" name="pwd" />
  div>
  <div>
    <input
      id="image"
      type="image"
      src="https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png"
      alt="Login"
      width="100" />
  div>
form>
9
sự hình thành
Một chuỗi cho biết URL để gửi dữ liệu. Điều này được ưu tiên hơn thuộc tính 

00 trên phần tử 

01 sở hữu <form>
  <p>Login to your accountp>
  <div>
    <label for="userId">User IDlabel>
    <input type="text" id="userId" name="userId" />
  div>
  <div>
    <label for="pwd">Passwordlabel>
    <input type="password" id="pwd" name="pwd" />
  div>
  <div>
    <input
      id="image"
      type="image"
      src="https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png"
      alt="Login"
      width="100" />
  div>
form>
7
Thuộc tính này cũng có sẵn trên các phần tử 

03 và 

04
định dạng
Một chuỗi xác định phương thức mã hóa sẽ sử dụng khi gửi dữ liệu biểu mẫu tới máy chủ. Có ba giá trị được phép

05Giá trị mặc định này sẽ gửi dữ liệu biểu mẫu dưới dạng chuỗi sau khi URL mã hóa văn bản bằng thuật toán, chẳng hạn như 

06

07Sử dụng API 

08 để quản lý dữ liệu, cho phép gửi tệp đến máy chủ. Bạn phải sử dụng loại mã hóa này nếu biểu mẫu của bạn bao gồm bất kỳ yếu tố <form>
  <p>Login to your accountp>
  <div>
    <label for="userId">User IDlabel>
    <input type="text" id="userId" name="userId" />
  div>
  <div>
    <label for="pwd">Passwordlabel>
    <input type="password" id="pwd" name="pwd" />
  div>
  <div>
    <input
      id="image"
      type="image"
      src="https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png"
      alt="Login"
      width="100" />
  div>
form>
7 nào của 

80 

81 (

82)

83Văn bản thô; 
Nếu được chỉ định, giá trị của thuộc tính 

84 sẽ ghi đè thuộc tính 

00 của biểu mẫu sở hữu
Thuộc tính này cũng có sẵn trên các phần tử 

03 và 

04
phương pháp tạo hình
Một chuỗi cho biết phương thức HTTP sẽ sử dụng khi gửi dữ liệu của biểu mẫu; . giá trị được phép là

89URL được tạo bằng cách bắt đầu bằng URL được cung cấp bởi thuộc tính 
button {
  border: none;
  cursor: pointer;
  appearance: none;
  background-color: inherit;
}
80 hoặc 

00, nối thêm ký tự dấu chấm hỏi ("?"), sau đó nối thêm dữ liệu của biểu mẫu, được mã hóa như mô tả của 

84 hoặc thuộc tính 
button {
  border: none;
  cursor: pointer;
  appearance: none;
  background-color: inherit;
}
83 của biểu mẫu. URL này sau đó được gửi đến máy chủ bằng yêu cầu HTTP 

89. Phương pháp này hoạt động tốt đối với các biểu mẫu đơn giản chỉ chứa các ký tự ASCII và không có tác dụng phụ. Đây là giá trị mặc định
button {
  border: none;
  cursor: pointer;
  appearance: none;
  background-color: inherit;
}
85Dữ liệu của biểu mẫu được bao gồm trong phần nội dung của yêu cầu được gửi tới URL được cung cấp bởi thuộc tính 
button {
  border: none;
  cursor: pointer;
  appearance: none;
  background-color: inherit;
}
80 hoặc 

00 bằng cách sử dụng yêu cầu HTTP 
button {
  border: none;
  cursor: pointer;
  appearance: none;
  background-color: inherit;
}
85. Phương pháp này hỗ trợ dữ liệu phức tạp và tệp đính kèm
button {
  border: none;
  cursor: pointer;
  appearance: none;
  background-color: inherit;
}
89Phương pháp này được sử dụng để chỉ ra rằng nút đóng hộp thoại liên quan đến đầu vào và hoàn toàn không truyền dữ liệu biểu mẫu
Thuộc tính này cũng có sẵn trên các phần tử 

03 và 

04
formnovalidate
Thuộc tính Boolean, nếu có, chỉ định rằng biểu mẫu không được xác thực trước khi gửi tới máy chủ. Điều này ghi đè giá trị của thuộc tính 
<form>
  <p>Login to your accountp>
  <div>
    <label for="userId">User IDlabel>
    <input type="text" id="userId" name="userId" />
  div>
  <div>
    <label for="pwd">Passwordlabel>
    <input type="password" id="pwd" name="pwd" />
  div>
  <div>
    <input
      id="image"
      type="image"
      src="https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png"
      alt="Login"
      width="100" />
  div>
form>
72 trên biểu mẫu sở hữu của phần tử
Thuộc tính này cũng có sẵn trên các phần tử 

03 và 

04
mục tiêu biểu mẫu
Một chuỗi chỉ định tên hoặc từ khóa cho biết vị trí hiển thị phản hồi nhận được sau khi gửi biểu mẫu. Chuỗi phải là tên của bối cảnh duyệt web (nghĩa là tab, cửa sổ hoặc 
<form>
  <p>Login to your accountp>
  <div>
    <label for="userId">User IDlabel>
    <input type="text" id="userId" name="userId" />
  div>
  <div>
    <label for="pwd">Passwordlabel>
    <input type="password" id="pwd" name="pwd" />
  div>
  <div>
    <input
      id="image"
      type="image"
      src="https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png"
      alt="Login"
      width="100" />
  div>
form>
75. Một giá trị được chỉ định ở đây sẽ ghi đè bất kỳ mục tiêu nào được cung cấp bởi thuộc tính <form>
  <p>Login to your accountp>
  <div>
    <label for="userId">User IDlabel>
    <input type="text" id="userId" name="userId" />
  div>
  <div>
    <label for="pwd">Passwordlabel>
    <input type="password" id="pwd" name="pwd" />
  div>
  <div>
    <input
      id="image"
      type="image"
      src="https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png"
      alt="Login"
      width="100" />
  div>
form>
76 trên 

01 sở hữu đầu vào này
Ngoài tên thực của tab, cửa sổ hoặc khung nội tuyến, có một vài từ khóa đặc biệt có thể được sử dụng
<form>
  <p>Login to your accountp>
  <div>
    <label for="userId">User IDlabel>
    <input type="text" id="userId" name="userId" />
  div>
  <div>
    <label for="pwd">Passwordlabel>
    <input type="password" id="pwd" name="pwd" />
  div>
  <div>
    <input
      id="image"
      type="image"
      src="https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png"
      alt="Login"
      width="100" />
  div>
form>
78Tải phản hồi vào ngữ cảnh duyệt giống như ngữ cảnh chứa biểu mẫu. Thao tác này sẽ thay thế tài liệu hiện tại bằng dữ liệu nhận được. Đây là giá trị mặc định được sử dụng nếu không có giá trị nào được chỉ định



<form>
  <p>Login to your accountp>
  <div>
    <label for="userId">User IDlabel>
    <input type="text" id="userId" name="userId" />
  div>
  <div>
    <label for="pwd">Passwordlabel>
    <input type="password" id="pwd" name="pwd" />
  div>
  <div>
    <input
      id="image"
      type="image"
      src="https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png"
      alt="Login"
      width="100" />
  div>
form>
79Tải phản hồi vào ngữ cảnh duyệt web mới, chưa được đặt tên. Đây thường là một tab mới trong cùng một cửa sổ với tài liệu hiện tại, nhưng có thể khác tùy thuộc vào cấu hình của tác nhân người dùng
<form>
  <p>Login to your accountp>
  <div>
    <label for="userId">User IDlabel>
    <input type="text" id="userId" name="userId" />
  div>
  <div>
    <label for="pwd">Passwordlabel>
    <input type="password" id="pwd" name="pwd" />
  div>
  <div>
    <input
      id="image"
      type="image"
      src="https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png"
      alt="Login"
      width="100" />
  div>
form>
80Tải phản hồi vào ngữ cảnh duyệt chính của ngữ cảnh hiện tại. Nếu không có ngữ cảnh gốc, điều này hoạt động giống như 
<form>
  <p>Login to your accountp>
  <div>
    <label for="userId">User IDlabel>
    <input type="text" id="userId" name="userId" />
  div>
  <div>
    <label for="pwd">Passwordlabel>
    <input type="password" id="pwd" name="pwd" />
  div>
  <div>
    <input
      id="image"
      type="image"
      src="https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png"
      alt="Login"
      width="100" />
  div>
form>
78
<form>
  <p>Login to your accountp>
  <div>
    <label for="userId">User IDlabel>
    <input type="text" id="userId" name="userId" />
  div>
  <div>
    <label for="pwd">Passwordlabel>
    <input type="password" id="pwd" name="pwd" />
  div>
  <div>
    <input
      id="image"
      type="image"
      src="https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png"
      alt="Login"
      width="100" />
  div>
form>
82Tải phản hồi vào bối cảnh duyệt cấp cao nhất; . Nếu bối cảnh hiện tại là bối cảnh trên cùng, điều này hoạt động giống như 
<form>
  <p>Login to your accountp>
  <div>
    <label for="userId">User IDlabel>
    <input type="text" id="userId" name="userId" />
  div>
  <div>
    <label for="pwd">Passwordlabel>
    <input type="password" id="pwd" name="pwd" />
  div>
  <div>
    <input
      id="image"
      type="image"
      src="https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png"
      alt="Login"
      width="100" />
  div>
form>
78
Thuộc tính này cũng có sẵn trên các phần tử 

03 và 

04
Chiều cao
Một số chỉ định chiều cao, tính bằng pixel CSS, để vẽ hình ảnh được chỉ định bởi thuộc tính 
<form>
  <p>Login to your accountp>
  <div>
    <label for="userId">User IDlabel>
    <input type="text" id="userId" name="userId" />
  div>
  <div>
    <label for="pwd">Passwordlabel>
    <input type="password" id="pwd" name="pwd" />
  div>
  <div>
    <input
      id="image"
      type="image"
      src="https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png"
      alt="Login"
      width="100" />
  div>
form>
1
src
Một chuỗi chỉ định URL của tệp hình ảnh sẽ hiển thị để đại diện cho nút gửi đồ họa. Khi người dùng tương tác với hình ảnh, đầu vào được xử lý giống như bất kỳ đầu vào nút nào khác
chiều rộng
Một số cho biết chiều rộng để vẽ hình ảnh, tính bằng pixel CSS
Thuộc tính lỗi thời
Thuộc tính sau được xác định bởi HTML 4 cho đầu vào 
<form>
  <p>Login to your accountp>
  <div>
    <label for="userId">User IDlabel>
    <input type="text" id="userId" name="userId" />
  div>
  <div>
    <label for="pwd">Passwordlabel>
    <input type="password" id="pwd" name="pwd" />
  div>
  <div>
    <input
      id="image"
      type="image"
      src="https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png"
      alt="Login"
      width="100" />
  div>
form>
8, nhưng không được triển khai bởi tất cả các trình duyệt và kể từ đó đã không được dùng nữa
sử dụng bản đồ
Nếu 
<form>
  <p>Login to your accountp>
  <div>
    <label for="userId">User IDlabel>
    <input type="text" id="userId" name="userId" />
  div>
  <div>
    <label for="pwd">Passwordlabel>
    <input type="password" id="pwd" name="pwd" />
  div>
  <div>
    <input
      id="image"
      type="image"
      src="https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png"
      alt="Login"
      width="100" />
  div>
form>
88 được chỉ định, thì đó phải là tên của thành phần bản đồ hình ảnh, <form>
  <p>Login to your accountp>
  <div>
    <label for="userId">User IDlabel>
    <input type="text" id="userId" name="userId" />
  div>
  <div>
    <label for="pwd">Passwordlabel>
    <input type="password" id="pwd" name="pwd" />
  div>
  <div>
    <input
      id="image"
      type="image"
      src="https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png"
      alt="Login"
      width="100" />
  div>
form>
89, xác định bản đồ hình ảnh để sử dụng với hình ảnh. Cách sử dụng này đã lỗi thời; 
Sử dụng đầu vào hình ảnh
Phần tử 
<form>
  <p>Login to your accountp>
  <div>
    <label for="userId">User IDlabel>
    <input type="text" id="userId" name="userId" />
  div>
  <div>
    <label for="pwd">Passwordlabel>
    <input type="password" id="pwd" name="pwd" />
  div>
  <div>
    <input
      id="image"
      type="image"
      src="https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png"
      alt="Login"
      width="100" />
  div>
form>
9 là phần tử được thay thế (phần tử có nội dung không được tạo hoặc quản lý trực tiếp bởi lớp CSS), hoạt động theo cách giống như phần tử <form>
  <p>Login to your accountp>
  <div>
    <label for="userId">User IDlabel>
    <input type="text" id="userId" name="userId" />
  div>
  <div>
    <label for="pwd">Passwordlabel>
    <input type="password" id="pwd" name="pwd" />
  div>
  <div>
    <input
      id="image"
      type="image"
      src="https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png"
      alt="Login"
      width="100" />
  div>
form>
9 thông thường, nhưng có khả năng của nút gửi
Các tính năng nhập hình ảnh cần thiết
Hãy xem một ví dụ cơ bản bao gồm tất cả các tính năng thiết yếu mà bạn cần sử dụng (Những tính năng này hoạt động giống hệt như trên phần tử 
<form>
  <p>Login to your accountp>
  <div>
    <label for="userId">User IDlabel>
    <input type="text" id="userId" name="userId" />
  div>
  <div>
    <label for="pwd">Passwordlabel>
    <input type="password" id="pwd" name="pwd" />
  div>
  <div>
    <input
      id="image"
      type="image"
      src="https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png"
      alt="Login"
      width="100" />
  div>
form>
9. )
<form>
  <p>Login to your accountp>
  <div>
    <label for="userId">User IDlabel>
    <input type="text" id="userId" name="userId" />
  div>
  <div>
    <label for="pwd">Passwordlabel>
    <input type="password" id="pwd" name="pwd" />
  div>
  <div>
    <input
      id="image"
      type="image"
      src="https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png"
      alt="Login"
      width="100" />
  div>
form>
8
Thuộc tính <form>
  <p>Login to your accountp>
  <div>
    <label for="userId">User IDlabel>
    <input type="text" id="userId" name="userId" />
  div>
  <div>
    <label for="pwd">Passwordlabel>
    <input type="password" id="pwd" name="pwd" />
  div>
  <div>
    <input
      id="image"
      type="image"
      src="https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png"
      alt="Login"
      width="100" />
  div>
form>
1 dùng để chỉ định đường dẫn đến hình ảnh muốn hiển thị trong nút
Thuộc tính <form>
  <p>Login to your accountp>
  <div>
    <label for="userId">User IDlabel>
    <input type="text" id="userId" name="userId" />
  div>
  <div>
    <label for="pwd">Passwordlabel>
    <input type="password" id="pwd" name="pwd" />
  div>
  <div>
    <input
      id="image"
      type="image"
      src="https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png"
      alt="Login"
      width="100" />
  div>
form>
2 cung cấp văn bản thay thế cho hình ảnh, vì vậy người dùng trình đọc màn hình có thể hiểu rõ hơn về mục đích sử dụng của nút này. Nó cũng sẽ hiển thị nếu hình ảnh không thể hiển thị vì bất kỳ lý do gì (ví dụ: nếu đường dẫn bị sai chính tả). Nếu có thể, hãy sử dụng văn bản khớp với nhãn bạn sẽ sử dụng nếu bạn đang sử dụng nút gửi tiêu chuẩn
Các thuộc tính <form>
  <p>Login to your accountp>
  <div>
    <label for="userId">User IDlabel>
    <input type="text" id="userId" name="userId" />
  div>
  <div>
    <label for="pwd">Passwordlabel>
    <input type="password" id="pwd" name="pwd" />
  div>
  <div>
    <input
      id="image"
      type="image"
      src="https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png"
      alt="Login"
      width="100" />
  div>
form>
96 và <form>
  <p>Login to your accountp>
  <div>
    <label for="userId">User IDlabel>
    <input type="text" id="userId" name="userId" />
  div>
  <div>
    <label for="pwd">Passwordlabel>
    <input type="password" id="pwd" name="pwd" />
  div>
  <div>
    <input
      id="image"
      type="image"
      src="https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png"
      alt="Login"
      width="100" />
  div>
form>
97 được sử dụng để chỉ định chiều rộng và chiều cao mà hình ảnh sẽ được hiển thị, tính bằng pixel. Nút có cùng kích thước với hình ảnh; . g. <form>
  <p>Login to your accountp>
  <div>
    <label for="userId">User IDlabel>
    <input type="text" id="userId" name="userId" />
  div>
  <div>
    <label for="pwd">Passwordlabel>
    <input type="password" id="pwd" name="pwd" />
  div>
  <div>
    <input
      id="image"
      type="image"
      src="https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png"
      alt="Login"
      width="100" />
  div>
form>
98). Ngoài ra, nếu bạn chỉ chỉ định một kích thước, thì kích thước kia sẽ tự động được điều chỉnh để hình ảnh duy trì tỷ lệ khung hình ban đầu
Ghi đè các hành vi biểu mẫu mặc định
Các phần tử 
<form>
  <p>Login to your accountp>
  <div>
    <label for="userId">User IDlabel>
    <input type="text" id="userId" name="userId" />
  div>
  <div>
    <label for="pwd">Passwordlabel>
    <input type="password" id="pwd" name="pwd" />
  div>
  <div>
    <input
      id="image"
      type="image"
      src="https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png"
      alt="Login"
      width="100" />
  div>
form>
9 — như các nút gửi thông thường — có thể chấp nhận một số thuộc tính ghi đè hành vi biểu mẫu mặc định
button {
  border: none;
  cursor: pointer;
  appearance: none;
  background-color: inherit;
}
80URI của chương trình xử lý thông tin được gửi bởi phần tử đầu vào; 

84Chỉ định loại nội dung được sử dụng để gửi biểu mẫu đến máy chủ. giá trị có thể là




05. Giá trị mặc định nếu thuộc tính không được chỉ định

83
Nếu thuộc tính này được chỉ định, nó sẽ ghi đè thuộc tính 
button {
  border: none;
  cursor: pointer;
  appearance: none;
  background-color: inherit;
}
83 của chủ sở hữu biểu mẫu của phần tử
<form>
  <p>Login to your accountp>
  <div>
    <label for="userId">User IDlabel>
    <input type="text" id="userId" name="userId" />
  div>
  <div>
    <label for="pwd">Passwordlabel>
    <input type="password" id="pwd" name="pwd" />
  div>
  <div>
    <input
      id="image"
      type="image"
      src="https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png"
      alt="Login"
      width="100" />
  div>
form>
06Chỉ định phương thức HTTP mà trình duyệt sử dụng để gửi biểu mẫu. giá trị có thể là
button {
  border: none;
  cursor: pointer;
  appearance: none;
  background-color: inherit;
}
85. Dữ liệu từ biểu mẫu được bao gồm trong phần thân của biểu mẫu và được gửi đến máy chủ

89. Dữ liệu từ biểu mẫu được thêm vào URI thuộc tính <form>
  <p>Login to your accountp>
  <div>
    <label for="userId">User IDlabel>
    <input type="text" id="userId" name="userId" />
  div>
  <div>
    <label for="pwd">Passwordlabel>
    <input type="password" id="pwd" name="pwd" />
  div>
  <div>
    <input
      id="image"
      type="image"
      src="https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png"
      alt="Login"
      width="100" />
  div>
form>
09, với dấu '?' . Sử dụng phương pháp này khi biểu mẫu không có tác dụng phụ và chỉ chứa các ký tự ASCII
Nếu được chỉ định, thuộc tính này sẽ ghi đè thuộc tính 

88 của chủ sở hữu biểu mẫu của phần tử
<form>
  <p>Login to your accountp>
  <div>
    <label for="userId">User IDlabel>
    <input type="text" id="userId" name="userId" />
  div>
  <div>
    <label for="pwd">Passwordlabel>
    <input type="password" id="pwd" name="pwd" />
  div>
  <div>
    <input
      id="image"
      type="image"
      src="https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png"
      alt="Login"
      width="100" />
  div>
form>
11Thuộc tính Boolean chỉ định rằng biểu mẫu không được xác thực khi nó được gửi. Nếu thuộc tính này được chỉ định, nó sẽ ghi đè thuộc tính 
<form>
  <p>Login to your accountp>
  <div>
    <label for="userId">User IDlabel>
    <input type="text" id="userId" name="userId" />
  div>
  <div>
    <label for="pwd">Passwordlabel>
    <input type="password" id="pwd" name="pwd" />
  div>
  <div>
    <input
      id="image"
      type="image"
      src="https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png"
      alt="Login"
      width="100" />
  div>
form>
72 của chủ sở hữu biểu mẫu của phần tử
<form>
  <p>Login to your accountp>
  <div>
    <label for="userId">User IDlabel>
    <input type="text" id="userId" name="userId" />
  div>
  <div>
    <label for="pwd">Passwordlabel>
    <input type="password" id="pwd" name="pwd" />
  div>
  <div>
    <input
      id="image"
      type="image"
      src="https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png"
      alt="Login"
      width="100" />
  div>
form>
13Tên hoặc từ khóa cho biết nơi hiển thị phản hồi nhận được sau khi gửi biểu mẫu. Đây là tên hoặc từ khóa cho ngữ cảnh duyệt web (ví dụ: tab, cửa sổ hoặc khung nội tuyến). Nếu thuộc tính này được chỉ định, nó sẽ ghi đè thuộc tính 
<form>
  <p>Login to your accountp>
  <div>
    <label for="userId">User IDlabel>
    <input type="text" id="userId" name="userId" />
  div>
  <div>
    <label for="pwd">Passwordlabel>
    <input type="password" id="pwd" name="pwd" />
  div>
  <div>
    <input
      id="image"
      type="image"
      src="https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png"
      alt="Login"
      width="100" />
  div>
form>
76 của chủ sở hữu biểu mẫu của phần tử. Các từ khóa sau đây có ý nghĩa đặc biệt
_<form>
  <p>Login to your accountp>
  <div>
    <label for="userId">User IDlabel>
    <input type="text" id="userId" name="userId" />
  div>
  <div>
    <label for="pwd">Passwordlabel>
    <input type="password" id="pwd" name="pwd" />
  div>
  <div>
    <input
      id="image"
      type="image"
      src="https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png"
      alt="Login"
      width="100" />
  div>
form>
15. Tải phản hồi vào ngữ cảnh duyệt giống như ngữ cảnh hiện tại. Giá trị này là giá trị mặc định nếu thuộc tính không được chỉ định
<form>
  <p>Login to your accountp>
  <div>
    <label for="userId">User IDlabel>
    <input type="text" id="userId" name="userId" />
  div>
  <div>
    <label for="pwd">Passwordlabel>
    <input type="password" id="pwd" name="pwd" />
  div>
  <div>
    <input
      id="image"
      type="image"
      src="https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png"
      alt="Login"
      width="100" />
  div>
form>
79. Tải phản hồi vào bối cảnh duyệt chưa được đặt tên mới
<form>
  <p>Login to your accountp>
  <div>
    <label for="userId">User IDlabel>
    <input type="text" id="userId" name="userId" />
  div>
  <div>
    <label for="pwd">Passwordlabel>
    <input type="password" id="pwd" name="pwd" />
  div>
  <div>
    <input
      id="image"
      type="image"
      src="https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png"
      alt="Login"
      width="100" />
  div>
form>
80. Tải phản hồi vào ngữ cảnh duyệt chính của ngữ cảnh hiện tại. Nếu không có cha, tùy chọn này hoạt động giống như <form>
  <p>Login to your accountp>
  <div>
    <label for="userId">User IDlabel>
    <input type="text" id="userId" name="userId" />
  div>
  <div>
    <label for="pwd">Passwordlabel>
    <input type="password" id="pwd" name="pwd" />
  div>
  <div>
    <input
      id="image"
      type="image"
      src="https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png"
      alt="Login"
      width="100" />
  div>
form>
78
<form>
  <p>Login to your accountp>
  <div>
    <label for="userId">User IDlabel>
    <input type="text" id="userId" name="userId" />
  div>
  <div>
    <label for="pwd">Passwordlabel>
    <input type="password" id="pwd" name="pwd" />
  div>
  <div>
    <input
      id="image"
      type="image"
      src="https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png"
      alt="Login"
      width="100" />
  div>
form>
82. Tải phản hồi vào bối cảnh duyệt web cấp cao nhất (nghĩa là bối cảnh duyệt web là tổ tiên của bối cảnh hiện tại và không có cha mẹ). Nếu không có cha, tùy chọn này hoạt động giống như <form>
  <p>Login to your accountp>
  <div>
    <label for="userId">User IDlabel>
    <input type="text" id="userId" name="userId" />
  div>
  <div>
    <label for="pwd">Passwordlabel>
    <input type="password" id="pwd" name="pwd" />
  div>
  <div>
    <input
      id="image"
      type="image"
      src="https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png"
      alt="Login"
      width="100" />
  div>
form>
78
Sử dụng các điểm dữ liệu x và y
Khi bạn gửi biểu mẫu bằng nút được tạo bằng 
<form>
  <p>Login to your accountp>
  <div>
    <label for="userId">User IDlabel>
    <input type="text" id="userId" name="userId" />
  div>
  <div>
    <label for="pwd">Passwordlabel>
    <input type="password" id="pwd" name="pwd" />
  div>
  <div>
    <input
      id="image"
      type="image"
      src="https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png"
      alt="Login"
      width="100" />
  div>
form>
9, hai điểm dữ liệu bổ sung sẽ được trình duyệt tự động gửi đến máy chủ — <form>
  <p>Login to your accountp>
  <div>
    <label for="userId">User IDlabel>
    <input type="text" id="userId" name="userId" />
  div>
  <div>
    <label for="pwd">Passwordlabel>
    <input type="password" id="pwd" name="pwd" />
  div>
  <div>
    <input
      id="image"
      type="image"
      src="https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png"
      alt="Login"
      width="100" />
  div>
form>
02 và <form>
  <p>Login to your accountp>
  <div>
    <label for="userId">User IDlabel>
    <input type="text" id="userId" name="userId" />
  div>
  <div>
    <label for="pwd">Passwordlabel>
    <input type="password" id="pwd" name="pwd" />
  div>
  <div>
    <input
      id="image"
      type="image"
      src="https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png"
      alt="Login"
      width="100" />
  div>
form>
03. Bạn có thể thấy điều này đang hoạt động trong ví dụ tọa độ XY của chúng tôi
Khi bạn nhấp vào hình ảnh để gửi biểu mẫu, bạn sẽ thấy dữ liệu được thêm vào URL dưới dạng tham số, ví dụ: 
<form>
  <p>Login to your accountp>
  <div>
    <label for="userId">User IDlabel>
    <input type="text" id="userId" name="userId" />
  div>
  <div>
    <label for="pwd">Passwordlabel>
    <input type="password" id="pwd" name="pwd" />
  div>
  <div>
    <input
      id="image"
      type="image"
      src="https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png"
      alt="Login"
      width="100" />
  div>
form>
04. Nếu đầu vào hình ảnh có thuộc tính <form>
  <p>Login to your accountp>
  <div>
    <label for="userId">User IDlabel>
    <input type="text" id="userId" name="userId" />
  div>
  <div>
    <label for="pwd">Passwordlabel>
    <input type="password" id="pwd" name="pwd" />
  div>
  <div>
    <input
      id="image"
      type="image"
      src="https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png"
      alt="Login"
      width="100" />
  div>
form>
05 thì hãy nhớ rằng tên đã chỉ định có tiền tố trên mọi thuộc tính, vì vậy nếu <form>
  <p>Login to your accountp>
  <div>
    <label for="userId">User IDlabel>
    <input type="text" id="userId" name="userId" />
  div>
  <div>
    <label for="pwd">Passwordlabel>
    <input type="password" id="pwd" name="pwd" />
  div>
  <div>
    <input
      id="image"
      type="image"
      src="https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png"
      alt="Login"
      width="100" />
  div>
form>
05 là <form>
  <p>Login to your accountp>
  <div>
    <label for="userId">User IDlabel>
    <input type="text" id="userId" name="userId" />
  div>
  <div>
    <label for="pwd">Passwordlabel>
    <input type="password" id="pwd" name="pwd" />
  div>
  <div>
    <input
      id="image"
      type="image"
      src="https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png"
      alt="Login"
      width="100" />
  div>
form>
07 thì tọa độ được trả về sẽ được định dạng trong URL là <form>
  <p>Login to your accountp>
  <div>
    <label for="userId">User IDlabel>
    <input type="text" id="userId" name="userId" />
  div>
  <div>
    <label for="pwd">Passwordlabel>
    <input type="password" id="pwd" name="pwd" />
  div>
  <div>
    <input
      id="image"
      type="image"
      src="https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png"
      alt="Login"
      width="100" />
  div>
form>
08. Tất nhiên, điều này cũng áp dụng cho tất cả các thuộc tính khác.
Đây là các tọa độ X và Y của hình ảnh mà con chuột đã nhấp vào để gửi biểu mẫu, trong đó (0,0) là góc trên bên trái của hình ảnh. Chúng có thể được sử dụng khi vị trí mà hình ảnh được nhấp vào là quan trọng, ví dụ: bạn có thể có một bản đồ mà khi được nhấp vào, sẽ gửi tọa độ đã được nhấp đến máy chủ. Sau đó, mã phía máy chủ sẽ tìm ra vị trí được nhấp vào và trả về thông tin về các địa điểm lân cận
Trong ví dụ trên của chúng tôi, chúng tôi có thể viết mã phía máy chủ để tìm ra màu nào được nhấp vào theo tọa độ được gửi và giữ một kiểm đếm các màu yêu thích mà mọi người đã bình chọn
Điều chỉnh vị trí của hình ảnh và thuật toán chia tỷ lệ
Bạn có thể sử dụng thuộc tính 
<form>
  <p>Login to your accountp>
  <div>
    <label for="userId">User IDlabel>
    <input type="text" id="userId" name="userId" />
  div>
  <div>
    <label for="pwd">Passwordlabel>
    <input type="password" id="pwd" name="pwd" />
  div>
  <div>
    <input
      id="image"
      type="image"
      src="https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png"
      alt="Login"
      width="100" />
  div>
form>
09 để điều chỉnh vị trí của hình ảnh trong khung của phần tử <form>
  <p>Login to your accountp>
  <div>
    <label for="userId">User IDlabel>
    <input type="text" id="userId" name="userId" />
  div>
  <div>
    <label for="pwd">Passwordlabel>
    <input type="password" id="pwd" name="pwd" />
  div>
  <div>
    <input
      id="image"
      type="image"
      src="https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png"
      alt="Login"
      width="100" />
  div>
form>
7 và thuộc tính <form>
  <p>Login to your accountp>
  <div>
    <label for="userId">User IDlabel>
    <input type="text" id="userId" name="userId" />
  div>
  <div>
    <label for="pwd">Passwordlabel>
    <input type="password" id="pwd" name="pwd" />
  div>
  <div>
    <input
      id="image"
      type="image"
      src="https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png"
      alt="Login"
      width="100" />
  div>
form>
11 để kiểm soát cách điều chỉnh kích thước của hình ảnh để vừa với khung. Điều này cho phép bạn chỉ định một khung cho hình ảnh bằng cách sử dụng các thuộc tính <form>
  <p>Login to your accountp>
  <div>
    <label for="userId">User IDlabel>
    <input type="text" id="userId" name="userId" />
  div>
  <div>
    <label for="pwd">Passwordlabel>
    <input type="password" id="pwd" name="pwd" />
  div>
  <div>
    <input
      id="image"
      type="image"
      src="https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png"
      alt="Login"
      width="100" />
  div>
form>
96 và <form>
  <p>Login to your accountp>
  <div>
    <label for="userId">User IDlabel>
    <input type="text" id="userId" name="userId" />
  div>
  <div>
    <label for="pwd">Passwordlabel>
    <input type="password" id="pwd" name="pwd" />
  div>
  <div>
    <input
      id="image"
      type="image"
      src="https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png"
      alt="Login"
      width="100" />
  div>
form>
97 để dành khoảng trống trong bố cục, sau đó điều chỉnh vị trí của hình ảnh trong không gian đó và cách (hoặc nếu) nó được chia tỷ lệ để chiếm không gian đó
ví dụ
Một hình thức đăng nhập
Ví dụ sau hiển thị cùng một nút như trước, nhưng được bao gồm trong ngữ cảnh của một biểu mẫu đăng nhập điển hình
HTML
<form>
  <p>Login to your accountp>
  <div>
    <label for="userId">User IDlabel>
    <input type="text" id="userId" name="userId" />
  div>
  <div>
    <label for="pwd">Passwordlabel>
    <input type="password" id="pwd" name="pwd" />
  div>
  <div>
    <input
      id="image"
      type="image"
      src="https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png"
      alt="Login"
      width="100" />
  div>
form>
CSS
Và bây giờ là một số CSS đơn giản để làm cho các yếu tố cơ bản gọn gàng hơn

0
Điều chỉnh vị trí hình ảnh và tỷ lệ
Trong ví dụ này, chúng tôi điều chỉnh ví dụ trước để dành nhiều không gian hơn cho hình ảnh, sau đó điều chỉnh kích thước và vị trí của hình ảnh thực tế bằng cách sử dụng 
<form>
  <p>Login to your accountp>
  <div>
    <label for="userId">User IDlabel>
    <input type="text" id="userId" name="userId" />
  div>
  <div>
    <label for="pwd">Passwordlabel>
    <input type="password" id="pwd" name="pwd" />
  div>
  <div>
    <input
      id="image"
      type="image"
      src="https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png"
      alt="Login"
      width="100" />
  div>
form>
11 và <form>
  <p>Login to your accountp>
  <div>
    <label for="userId">User IDlabel>
    <input type="text" id="userId" name="userId" />
  div>
  <div>
    <label for="pwd">Passwordlabel>
    <input type="password" id="pwd" name="pwd" />
  div>
  <div>
    <input
      id="image"
      type="image"
      src="https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png"
      alt="Login"
      width="100" />
  div>
form>
09
HTML

8
CSS
button {
  border: none;
  cursor: pointer;
  appearance: none;
  background-color: inherit;
}
8
Ở đây, 
<form>
  <p>Login to your accountp>
  <div>
    <label for="userId">User IDlabel>
    <input type="text" id="userId" name="userId" />
  div>
  <div>
    <label for="pwd">Passwordlabel>
    <input type="password" id="pwd" name="pwd" />
  div>
  <div>
    <input
      id="image"
      type="image"
      src="https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png"
      alt="Login"
      width="100" />
  div>
form>
09 được định cấu hình để vẽ hình ảnh ở góc trên cùng bên phải của phần tử, trong khi <form>
  <p>Login to your accountp>
  <div>
    <label for="userId">User IDlabel>
    <input type="text" id="userId" name="userId" />
  div>
  <div>
    <label for="pwd">Passwordlabel>
    <input type="password" id="pwd" name="pwd" />
  div>
  <div>
    <input
      id="image"
      type="image"
      src="https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png"
      alt="Login"
      width="100" />
  div>
form>
11 được đặt thành <form>
  <p>Login to your accountp>
  <div>
    <label for="userId">User IDlabel>
    <input type="text" id="userId" name="userId" />
  div>
  <div>
    <label for="pwd">Passwordlabel>
    <input type="password" id="pwd" name="pwd" />
  div>
  <div>
    <input
      id="image"
      type="image"
      src="https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png"
      alt="Login"
      width="100" />
  div>
form>
18, điều này cho biết rằng hình ảnh phải được vẽ ở kích thước lớn nhất sẽ vừa với hộp của phần tử mà không làm thay đổi tỷ lệ khung hình của nó. Lưu ý nền màu xám có thể nhìn thấy của phần tử vẫn hiển thị trong khu vực không bị hình ảnh che phủ

programming html

Nút HTML tải hình ảnh

Tạo nút hình ảnh trong HTML

Thử nó

Giá trị

thuộc tính bổ sung

thay thế

sự hình thành

định dạng

phương pháp tạo hình

formnovalidate

mục tiêu biểu mẫu

Chiều cao

src

chiều rộng

Thuộc tính lỗi thời

sử dụng bản đồ

Sử dụng đầu vào hình ảnh

Các tính năng nhập hình ảnh cần thiết

Ghi đè các hành vi biểu mẫu mặc định

Sử dụng các điểm dữ liệu x và y

Điều chỉnh vị trí của hình ảnh và thuật toán chia tỷ lệ

ví dụ

Một hình thức đăng nhập

HTML

CSS

Điều chỉnh vị trí hình ảnh và tỷ lệ

HTML

CSS

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội