Làm thế nào để bạn thêm một thẻ email trong html?

Question

Các phần tử

<input id="emailAddress" type="email" multiple />

1 thuộc loại

<input id="emailAddress" type="email" multiple />

2 được sử dụng để cho phép người dùng nhập và chỉnh sửa địa chỉ email hoặc, nếu thuộc tính

<input id="emailAddress" type="email" multiple />

3 được chỉ định, danh sách các địa chỉ email

Nội dung chính Show

thuộc tính bổ sung
độ dài tối đa
Độ dài nhỏ nhất
<input id="emailAddress" type="email" multiple /> 06
<input id="emailAddress" type="email" multiple /> 09
<input id="emailAddress" type="email" multiple /> 05
Sử dụng đầu vào email
Một đầu vào email đơn giản
Cho phép nhiều địa chỉ email
Trình giữ chỗ
Kiểm soát kích thước đầu vào
Cung cấp các tùy chọn mặc định
Thẩm định
Xác thực cơ bản
xác thực mẫu
Có thẻ email trong HTML không?
Làm cách nào để đặt email trong HTML?

Thử nó

Giá trị đầu vào được xác thực tự động để đảm bảo rằng giá trị đó trống hoặc là địa chỉ email (hoặc danh sách địa chỉ) được định dạng đúng trước khi có thể gửi biểu mẫu. Các lớp giả CSS

<input id="emailAddress" type="email" multiple />

4 và

<input id="emailAddress" type="email" multiple />

5 được tự động áp dụng khi thích hợp để biểu thị trực quan liệu giá trị hiện tại của trường có phải là địa chỉ email hợp lệ hay không

Giá trị

Thuộc tính

<input id="emailAddress" type="email" multiple />

7 của phần tử

<input id="emailAddress" type="email" multiple />

1 chứa một chuỗi được tự động xác thực là tuân thủ cú pháp email. Cụ thể hơn, có ba định dạng giá trị có thể sẽ vượt qua xác thực

Một chuỗi trống ("") cho biết rằng người dùng đã không nhập giá trị hoặc giá trị đã bị xóa
Một địa chỉ email được tạo đúng cách. Điều này không nhất thiết có nghĩa là địa chỉ email tồn tại, nhưng ít nhất nó được định dạng đúng. Nói một cách đơn giản, điều này có nghĩa là
```
<input id="emailAddress" type="email" multiple />
```
8 hoặc
```
<input id="emailAddress" type="email" multiple />
```
9. Tất nhiên, còn nhiều điều hơn thế nữa;
Khi và chỉ khi thuộc tính
```
<input id="emailAddress" type="email" multiple />
```
3 được chỉ định, giá trị có thể là danh sách các địa chỉ email được phân tách bằng dấu phẩy được định dạng đúng. Mọi khoảng trắng ở cuối và ở đầu sẽ bị xóa khỏi mỗi địa chỉ trong danh sách

Xem Xác thực để biết chi tiết về cách xác thực địa chỉ email để đảm bảo rằng chúng được định dạng đúng

thuộc tính bổ sung

Ngoài các thuộc tính hoạt động trên tất cả các phần tử

<input id="emailAddress" type="email" multiple />

1 bất kể loại của chúng, đầu vào

<input id="emailAddress" type="email" multiple />

2 hỗ trợ các thuộc tính sau

danh sách

Các giá trị của thuộc tính danh sách là

<input id="emailAddress" type="email" multiple />

23 của phần tử

<input id="emailAddress" type="email" multiple />

24 nằm trong cùng một tài liệu.

<input id="emailAddress" type="email" multiple />

24 cung cấp danh sách các giá trị được xác định trước để đề xuất cho người dùng cho đầu vào này. Bất kỳ giá trị nào trong danh sách không tương thích với

<input id="emailAddress" type="email" multiple />

26 đều không được đưa vào các tùy chọn được đề xuất. Các giá trị được cung cấp là đề xuất, không phải yêu cầu. người dùng có thể chọn từ danh sách được xác định trước này hoặc cung cấp một giá trị khác

độ dài tối đa

Số ký tự tối đa (dưới dạng đơn vị mã UTF-16) mà người dùng có thể nhập vào đầu vào

<input id="emailAddress" type="email" multiple />

2. Đây phải là một giá trị số nguyên 0 hoặc cao hơn. Nếu không có

<input id="emailAddress" type="email" multiple />

28 nào được chỉ định hoặc một giá trị không hợp lệ được chỉ định, thì đầu vào

<input id="emailAddress" type="email" multiple />

2 không có độ dài tối đa. Giá trị này cũng phải lớn hơn hoặc bằng giá trị của

<input id="emailAddress" type="email" multiple />

90

Đầu vào sẽ không xác thực được ràng buộc nếu độ dài của giá trị văn bản của trường lớn hơn

<input id="emailAddress" type="email" multiple />

28 đơn vị mã UTF-16 dài. Xác thực ràng buộc chỉ được áp dụng khi giá trị được thay đổi bởi người dùng

Độ dài nhỏ nhất

Số ký tự tối thiểu (dưới dạng đơn vị mã UTF-16) mà người dùng có thể nhập vào đầu vào

<input id="emailAddress" type="email" multiple />

2. Đây phải là một giá trị số nguyên không âm nhỏ hơn hoặc bằng giá trị được chỉ định bởi

<input id="emailAddress" type="email" multiple />

28. Nếu không có

<input id="emailAddress" type="email" multiple />

90 nào được chỉ định hoặc giá trị không hợp lệ được chỉ định, thì đầu vào

<input id="emailAddress" type="email" multiple />

2 không có độ dài tối thiểu

Dữ liệu nhập vào sẽ không xác thực được ràng buộc nếu độ dài của văn bản được nhập vào trường nhỏ hơn

<input id="emailAddress" type="email" multiple />

90 đơn vị mã UTF-16. Xác thực ràng buộc chỉ được áp dụng khi giá trị được thay đổi bởi người dùng

nhiều

Thuộc tính Boolean, nếu có, cho biết rằng người dùng có thể nhập danh sách nhiều địa chỉ email, được phân tách bằng dấu phẩy và, tùy chọn, ký tự khoảng trắng. Xem Cho phép nhiều địa chỉ email để biết ví dụ hoặc thuộc tính HTML. nhiều để biết thêm chi tiết

Ghi chú. Thông thường, nếu bạn chỉ định thuộc tính

<input id="emailAddress" type="email" multiple />

97, người dùng phải nhập địa chỉ email hợp lệ để trường được coi là hợp lệ. Tuy nhiên, nếu bạn thêm thuộc tính

<input id="emailAddress" type="email" multiple />

3, danh sách không có địa chỉ email nào (một chuỗi trống hoặc một chuỗi hoàn toàn là khoảng trắng) là một giá trị hợp lệ. Nói cách khác, người dùng không phải nhập dù chỉ một địa chỉ email khi

<input id="emailAddress" type="email" multiple />

3 được chỉ định, bất kể giá trị của

<input id="emailAddress" type="email" multiple />

97 là gì

mẫu

Thuộc tính

<input id="emailAddress" type="email" multiple />

01, khi được chỉ định, là một biểu thức chính quy mà giá trị đầu vào

<input id="emailAddress" type="email" multiple />

7 phải khớp để giá trị vượt qua xác thực ràng buộc. Nó phải là một biểu thức chính quy JavaScript hợp lệ, như được sử dụng bởi loại

<input id="emailAddress" type="email" multiple />

03 và như được ghi lại trong hướng dẫn của chúng tôi về các biểu thức chính quy; . Không được chỉ định dấu gạch chéo lên xung quanh văn bản mẫu

Nếu mẫu đã chỉ định không được chỉ định hoặc không hợp lệ, thì không có biểu thức chính quy nào được áp dụng và thuộc tính này bị bỏ qua hoàn toàn

Ghi chú. Sử dụng thuộc tính

<input id="emailAddress" type="email" multiple />

05 để chỉ định văn bản mà hầu hết các trình duyệt sẽ hiển thị dưới dạng chú giải công cụ để giải thích những yêu cầu để khớp với mẫu. Bạn cũng nên bao gồm văn bản giải thích khác gần đó

Xem phần Xác thực mẫu để biết chi tiết và ví dụ

<input id="emailAddress" type="email" multiple /> 06

Thuộc tính

<input id="emailAddress" type="email" multiple />

06 là một chuỗi cung cấp gợi ý ngắn gọn cho người dùng về loại thông tin được mong đợi trong trường. Nó phải là một từ hoặc cụm từ ngắn thể hiện loại dữ liệu dự kiến, chứ không phải là một thông báo giải thích. Văn bản không được bao gồm dấu xuống dòng hoặc xuống dòng

Nếu nội dung của điều khiển có một hướng (LTR hoặc RTL) nhưng cần hiển thị trình giữ chỗ theo hướng ngược lại, bạn có thể sử dụng các ký tự định dạng thuật toán hai chiều Unicode để ghi đè hướng trong trình giữ chỗ;

Note: Avoid using the

<input id="emailAddress" type="email" multiple />

06 attribute if you can. It is not as semantically useful as other ways to explain your form, and can cause unexpected technical issues with your content. See Labels and placeholders in : The Input (Form Input) element for more information.

<input id="emailAddress" type="email" multiple /> 09

Thuộc tính Boolean, nếu có, nghĩa là người dùng không thể chỉnh sửa trường này. Tuy nhiên,

<input id="emailAddress" type="email" multiple />

7 của nó vẫn có thể được thay đổi bằng mã JavaScript trực tiếp đặt thuộc tính

<input id="emailAddress" type="email" multiple />

01

<input id="emailAddress" type="email" multiple />

7

Ghi chú. Vì trường chỉ đọc không thể có giá trị, nên

<input id="emailAddress" type="email" multiple />

97 không có bất kỳ ảnh hưởng nào đối với đầu vào với thuộc tính

<input id="emailAddress" type="email" multiple />

09 cũng được chỉ định

<input id="emailAddress" type="email" multiple /> 05

Thuộc tính

<input id="emailAddress" type="email" multiple />

05 là một giá trị số cho biết độ rộng của trường nhập phải là bao nhiêu ký tự. Giá trị phải là một số lớn hơn 0 và giá trị mặc định là 20. Vì độ rộng ký tự khác nhau, điều này có thể chính xác hoặc không chính xác và không nên dựa vào đó;

Điều này không đặt giới hạn về số lượng ký tự mà người dùng có thể nhập vào trường. Nó chỉ xác định khoảng bao nhiêu có thể được nhìn thấy tại một thời điểm. Để đặt giới hạn trên cho độ dài của dữ liệu đầu vào, hãy sử dụng thuộc tính

<input id="emailAddress" type="email" multiple />

28

Sử dụng đầu vào email

Địa chỉ email nằm trong số các dạng dữ liệu văn bản được nhập thường xuyên nhất trên web; . Do đó, loại đầu vào

<input id="emailAddress" type="email" multiple />

2 có thể giúp công việc của bạn với tư cách là nhà phát triển web dễ dàng hơn nhiều vì nó có thể giúp đơn giản hóa công việc của bạn khi xây dựng giao diện người dùng và logic cho địa chỉ email. Khi bạn tạo đầu vào email với giá trị

<input id="emailAddress" type="email" multiple />

26 phù hợp,

<input id="emailAddress" type="email" multiple />

2, bạn sẽ tự động xác thực rằng văn bản đã nhập ít nhất ở dạng chính xác để có khả năng là địa chỉ email hợp pháp. Điều này có thể giúp tránh các trường hợp người dùng nhập sai địa chỉ của họ hoặc cung cấp địa chỉ không hợp lệ

Tuy nhiên, điều quan trọng cần lưu ý là điều này là không đủ để đảm bảo rằng văn bản được chỉ định là một địa chỉ email thực sự tồn tại, tương ứng với người dùng của trang web hoặc được chấp nhận theo bất kỳ cách nào khác. Nó đảm bảo rằng giá trị của trường được định dạng đúng là địa chỉ email

Ghi chú. Điều quan trọng cần nhớ là người dùng có thể sửa đổi HTML của bạn ở hậu trường, vì vậy trang web của bạn không được sử dụng xác thực này cho bất kỳ mục đích bảo mật nào. Bạn phải xác minh địa chỉ email ở phía máy chủ của bất kỳ giao dịch nào trong đó văn bản được cung cấp có thể có bất kỳ ý nghĩa bảo mật nào dưới bất kỳ hình thức nào

Một đầu vào email đơn giản

Hiện tại, tất cả các trình duyệt triển khai thành phần này đều triển khai thành phần này dưới dạng trường nhập văn bản tiêu chuẩn với các tính năng xác thực cơ bản. Tuy nhiên, thông số kỹ thuật cho phép các trình duyệt có quyền hạn về điều này. Ví dụ: phần tử có thể được tích hợp với sổ địa chỉ tích hợp trong thiết bị của người dùng để cho phép chọn địa chỉ email từ danh sách đó. Ở dạng cơ bản nhất, đầu vào

<input id="emailAddress" type="email" multiple />

2 có thể được triển khai như thế này

<input id="emailAddress" type="email" multiple />

2

Lưu ý rằng nó được coi là hợp lệ khi trống và khi một địa chỉ email được định dạng hợp lệ được nhập, nhưng nếu không thì không được coi là hợp lệ. Bằng cách thêm thuộc tính

<input id="emailAddress" type="email" multiple />

97, chỉ những địa chỉ email được tạo hợp lệ mới được phép;

Cho phép nhiều địa chỉ email

Bằng cách thêm thuộc tính Boolean

<input id="emailAddress" type="email" multiple />

3, đầu vào có thể được định cấu hình để chấp nhận nhiều địa chỉ email

<input id="emailAddress" type="email" multiple />

Đầu vào hiện được coi là hợp lệ khi một địa chỉ email được nhập hoặc khi bất kỳ số lượng địa chỉ email nào được phân tách bằng dấu phẩy và, tùy chọn, một số ký tự khoảng trắng có mặt

Ghi chú. Khi sử dụng

<input id="emailAddress" type="email" multiple />

3, giá trị được phép để trống

Một số ví dụ về chuỗi hợp lệ khi chỉ định

<input id="emailAddress" type="email" multiple />

3

<input id="emailAddress" type="email" multiple />

87

<input id="emailAddress" type="email" multiple />

88

<input id="emailAddress" type="email" multiple />

89

<input id="emailAddress" type="email" multiple />

10

<input id="emailAddress" type="email" multiple />

11

<input id="emailAddress" type="email" multiple />

12

Một số ví dụ về chuỗi không hợp lệ

<input id="emailAddress" type="email" multiple />

13

<input id="emailAddress" type="email" multiple />

14

<input id="emailAddress" type="email" multiple />

15

Trình giữ chỗ

Đôi khi, thật hữu ích khi đưa ra gợi ý trong ngữ cảnh về dạng dữ liệu đầu vào sẽ có. Điều này có thể đặc biệt quan trọng nếu thiết kế trang không cung cấp nhãn mô tả cho mỗi

<input id="emailAddress" type="email" multiple />

1. Đây là nơi giữ chỗ đến. Trình giữ chỗ là một giá trị thể hiện biểu mẫu mà

<input id="emailAddress" type="email" multiple />

7 phải thực hiện bằng cách trình bày một ví dụ về giá trị hợp lệ, được hiển thị bên trong hộp chỉnh sửa khi phần tử

<input id="emailAddress" type="email" multiple />

7 là "". Khi dữ liệu được nhập vào hộp, trình giữ chỗ sẽ biến mất;

Ở đây, chúng tôi có đầu vào

<input id="emailAddress" type="email" multiple />

2 với trình giữ chỗ

<input id="emailAddress" type="email" multiple />

10. Lưu ý cách trình giữ chỗ biến mất và xuất hiện lại khi bạn thao tác với nội dung của trường chỉnh sửa

<input id="emailAddress" type="email" multiple />

2

Kiểm soát kích thước đầu vào

Bạn không chỉ có thể kiểm soát độ dài vật lý của hộp nhập mà còn cả độ dài tối thiểu và tối đa được phép cho chính văn bản đầu vào

Kích thước phần tử đầu vào vật lý

Kích thước vật lý của hộp nhập liệu có thể được kiểm soát bằng thuộc tính

<input id="emailAddress" type="email" multiple />

05. Với nó, bạn có thể chỉ định số lượng ký tự mà hộp nhập liệu có thể hiển thị tại một thời điểm. Trong ví dụ này, hộp chỉnh sửa

<input id="emailAddress" type="email" multiple />

2 rộng 15 ký tự

<input id="emailAddress" type="email" multiple />

9

Độ dài giá trị phần tử

<input id="emailAddress" type="email" multiple />

05 tách biệt với giới hạn độ dài trên chính địa chỉ email đã nhập để bạn có thể có các trường vừa với một khoảng trống nhỏ trong khi vẫn cho phép nhập các chuỗi địa chỉ email dài hơn. Bạn có thể chỉ định độ dài tối thiểu, tính bằng ký tự, cho địa chỉ email đã nhập bằng thuộc tính

<input id="emailAddress" type="email" multiple />

90;

Ví dụ bên dưới tạo hộp nhập địa chỉ email có độ rộng 32 ký tự, yêu cầu nội dung không ngắn hơn 3 ký tự và không dài hơn 64 ký tự

<input id="emailAddress" type="email" multiple />

0

Cung cấp các tùy chọn mặc định

Cung cấp một mặc định duy nhất bằng thuộc tính giá trị

Như thường lệ, bạn có thể cung cấp giá trị mặc định cho hộp nhập liệu

<input id="emailAddress" type="email" multiple />

2 bằng cách đặt thuộc tính

<input id="emailAddress" type="email" multiple />

7 của nó

<input id="emailAddress" type="email" multiple />

0

Cung cấp các giá trị được đề xuất

Tiến thêm một bước nữa, bạn có thể cung cấp danh sách các tùy chọn mặc định mà người dùng có thể chọn bằng cách chỉ định thuộc tính

<input id="emailAddress" type="email" multiple />

18. Điều này không giới hạn người dùng trong các tùy chọn đó, nhưng cho phép họ chọn các địa chỉ email thường được sử dụng nhanh hơn. Điều này cũng cung cấp gợi ý cho

<input id="emailAddress" type="email" multiple />

19. Thuộc tính

<input id="emailAddress" type="email" multiple />

18 chỉ định ID của

<input id="emailAddress" type="email" multiple />

24, do đó chứa một phần tử

<input id="emailAddress" type="email" multiple />

72 cho mỗi giá trị được đề xuất;

<input id="emailAddress" type="email" multiple />

8

Với phần tử

<input id="emailAddress" type="email" multiple />

24 và các

<input id="emailAddress" type="email" multiple />

72 của nó tại chỗ, trình duyệt sẽ cung cấp các giá trị được chỉ định làm giá trị tiềm năng cho địa chỉ email; . Mặc dù trải nghiệm người dùng cụ thể có thể thay đổi từ trình duyệt này sang trình duyệt khác, nhưng thông thường, việc nhấp vào hộp chỉnh sửa sẽ hiển thị trình đơn thả xuống gồm các địa chỉ email được đề xuất. Sau đó, khi người dùng nhập, danh sách được lọc để chỉ hiển thị các giá trị phù hợp. Mỗi ký tự đã nhập sẽ thu hẹp danh sách cho đến khi người dùng thực hiện lựa chọn hoặc nhập một giá trị tùy chỉnh

Thẩm định

Có hai cấp độ xác thực nội dung dành cho đầu vào

<input id="emailAddress" type="email" multiple />

2. Đầu tiên, có mức xác thực tiêu chuẩn được cung cấp cho tất cả các

<input id="emailAddress" type="email" multiple />

1, tự động đảm bảo rằng nội dung đáp ứng các yêu cầu để trở thành một địa chỉ email hợp lệ. Nhưng cũng có tùy chọn thêm bộ lọc bổ sung để đảm bảo đáp ứng các nhu cầu chuyên biệt của riêng bạn, nếu bạn có bất kỳ yêu cầu nào.

Cảnh báo. Xác thực biểu mẫu HTML không thay thế cho các tập lệnh đảm bảo rằng dữ liệu đã nhập ở định dạng phù hợp. Quá dễ dàng để ai đó thực hiện các điều chỉnh đối với HTML cho phép họ bỏ qua xác thực hoặc xóa hoàn toàn. Cũng có thể ai đó bỏ qua HTML của bạn hoàn toàn và gửi dữ liệu trực tiếp đến máy chủ của bạn. Nếu mã phía máy chủ của bạn không xác thực được dữ liệu mà nó nhận được, thảm họa có thể xảy ra khi dữ liệu được định dạng không đúng (hoặc dữ liệu quá lớn, không đúng loại, v.v.) được nhập vào cơ sở dữ liệu của bạn

Xác thực cơ bản

Các trình duyệt tự động cung cấp xác thực để đảm bảo rằng chỉ những văn bản khớp với định dạng chuẩn cho địa chỉ email Internet mới được nhập vào hộp nhập liệu. Các trình duyệt sử dụng thuật toán tương đương với biểu thức chính quy sau

<input id="emailAddress" type="email" multiple />

1

Để tìm hiểu thêm về cách hoạt động của xác thực biểu mẫu và cách tận dụng các thuộc tính CSS

<input id="emailAddress" type="email" multiple />

4 và

<input id="emailAddress" type="email" multiple />

5 để tạo kiểu cho đầu vào dựa trên việc liệu giá trị hiện tại có hợp lệ hay không, hãy xem Xác thực dữ liệu biểu mẫu

Ghi chú. Có các vấn đề về thông số kỹ thuật đã biết liên quan đến tên miền quốc tế và xác thực địa chỉ email trong HTML. Xem lỗi W3C 15489 để biết chi tiết

xác thực mẫu

Nếu bạn cần giới hạn địa chỉ email đã nhập hơn là chỉ "bất kỳ chuỗi nào trông giống địa chỉ email", bạn có thể sử dụng thuộc tính

<input id="emailAddress" type="email" multiple />

01 để chỉ định một biểu thức chính quy mà giá trị phải khớp để nó hợp lệ. Nếu thuộc tính

<input id="emailAddress" type="email" multiple />

3 được chỉ định, thì từng mục riêng lẻ trong danh sách giá trị được phân định bằng dấu phẩy phải khớp với biểu thức chính quy

Ví dụ: giả sử bạn đang xây dựng trang dành cho nhân viên của Best Startup Ever, Inc. điều này sẽ cho phép họ liên hệ với bộ phận CNTT của họ để được trợ giúp. Ở dạng đơn giản hóa của chúng tôi, người dùng cần nhập địa chỉ email của họ và thông báo mô tả vấn đề họ cần trợ giúp. Chúng tôi muốn đảm bảo rằng không chỉ người dùng cung cấp địa chỉ email hợp lệ mà vì mục đích bảo mật, chúng tôi yêu cầu địa chỉ đó phải là địa chỉ email nội bộ của công ty

Vì đầu vào của loại

<input id="emailAddress" type="email" multiple />

2 xác thực dựa trên cả xác thực địa chỉ email tiêu chuẩn và

<input id="emailAddress" type="email" multiple />

01 được chỉ định, bạn có thể thực hiện điều này một cách dễ dàng. Hãy xem làm thế nào

<input id="emailAddress" type="email" multiple />

1

<input id="emailAddress" type="email" multiple />

7

<input id="emailAddress" type="email" multiple />

05 của chúng tôi chứa một

<input id="emailAddress" type="email" multiple />

1 loại

<input id="emailAddress" type="email" multiple />

2 cho địa chỉ email của người dùng, một

<input id="emailAddress" type="email" multiple />

08 để nhập thông báo của họ cho CNTT vào và một

<input id="emailAddress" type="email" multiple />

1 loại

<input id="emailAddress" type="email" multiple />

10, tạo nút để gửi biểu mẫu. Mỗi hộp nhập văn bản có một

<input id="emailAddress" type="email" multiple />

11 được liên kết với nó để cho người dùng biết những gì họ mong đợi

Chúng ta hãy xem xét kỹ hơn hộp nhập địa chỉ email. Các thuộc tính

<input id="emailAddress" type="email" multiple />

05 và

<input id="emailAddress" type="email" multiple />

28 của nó đều được đặt thành 64 để hiển thị chỗ cho địa chỉ email có giá trị 64 ký tự và để giới hạn số lượng ký tự thực sự được nhập tối đa là 64. Thuộc tính

<input id="emailAddress" type="email" multiple />

97 được chỉ định, bắt buộc phải cung cấp địa chỉ email hợp lệ

Một

<input id="emailAddress" type="email" multiple />

06 thích hợp được cung cấp—

<input id="emailAddress" type="email" multiple />

16—để chứng minh những gì cấu thành một mục nhập hợp lệ. Chuỗi này chứng minh rằng địa chỉ email nên được nhập và gợi ý rằng đó phải là công ty beststartupever. tài khoản com. Điều này bổ sung cho thực tế là việc sử dụng loại

<input id="emailAddress" type="email" multiple />

2 sẽ xác thực văn bản để đảm bảo rằng nó được định dạng giống như một địa chỉ email. Nếu văn bản trong hộp nhập liệu không phải là địa chỉ email, bạn sẽ nhận được thông báo lỗi giống như thế này

Nếu chúng tôi để mọi thứ ở đó, ít nhất chúng tôi sẽ xác thực các địa chỉ email hợp pháp. Nhưng chúng tôi muốn tiến thêm một bước. chúng tôi muốn đảm bảo rằng địa chỉ email trên thực tế ở dạng "_username_@beststartupever. com". Đây là nơi chúng tôi sẽ sử dụng

<input id="emailAddress" type="email" multiple />

01. Chúng tôi đặt

<input id="emailAddress" type="email" multiple />

01 thành

<input id="emailAddress" type="email" multiple />

20. Biểu thức chính quy đơn giản này yêu cầu một chuỗi bao gồm ít nhất một ký tự thuộc bất kỳ loại nào, sau đó là "@" theo sau là tên miền "beststartupever. com"

Lưu ý rằng điều này thậm chí không gần với bộ lọc thích hợp cho các địa chỉ email hợp lệ; . com" (lưu ý khoảng trắng ở đầu) hoặc "@@beststartupever. com", không cái nào hợp lệ. Tuy nhiên, trình duyệt chạy cả bộ lọc địa chỉ email tiêu chuẩn và mẫu tùy chỉnh của chúng tôi đối với văn bản được chỉ định. Do đó, chúng tôi kết thúc bằng một xác thực có nội dung "hãy đảm bảo rằng địa chỉ này giống với một địa chỉ email hợp lệ và nếu đúng như vậy, hãy đảm bảo rằng đó cũng là một công ty khởi nghiệp tốt nhất. địa chỉ com. "

Nên sử dụng thuộc tính

<input id="emailAddress" type="email" multiple />

05 cùng với

<input id="emailAddress" type="email" multiple />

01. Nếu bạn làm như vậy,

<input id="emailAddress" type="email" multiple />

05 phải mô tả mẫu. Nghĩa là, nó sẽ giải thích định dạng dữ liệu sẽ sử dụng, thay vì bất kỳ thông tin nào khác. Đó là vì

<input id="emailAddress" type="email" multiple />

05 có thể được hiển thị hoặc đọc như một phần của thông báo lỗi xác thực. Ví dụ: trình duyệt có thể hiển thị thông báo "Văn bản đã nhập không khớp với mẫu được yêu cầu. " theo sau là

<input id="emailAddress" type="email" multiple />

05 được chỉ định của bạn. Nếu

<input id="emailAddress" type="email" multiple />

05 của bạn giống như "Địa chỉ email", kết quả sẽ là thông báo "Văn bản đã nhập không khớp với mẫu bắt buộc. Địa chỉ email", không tốt lắm

Đó là lý do tại sao, thay vào đó, chúng tôi chỉ định chuỗi "Vui lòng chỉ cung cấp địa chỉ email công ty Best Startup Ever" Bằng cách đó, thông báo lỗi đầy đủ có thể giống như "Văn bản đã nhập không khớp với mẫu bắt buộc. Vui lòng chỉ cung cấp địa chỉ email công ty Best Startup Ever. "

Ghi chú. Nếu bạn gặp sự cố khi viết các biểu thức chính quy xác thực của mình và chúng không hoạt động bình thường, hãy kiểm tra bảng điều khiển của trình duyệt của bạn;

ví dụ

Ở đây, chúng tôi có một đầu vào email có ID

<input id="emailAddress" type="email" multiple />

27 được phép dài tối đa 256 ký tự. Bản thân hộp nhập liệu có độ rộng vật lý là 64 ký tự và hiển thị văn bản

<input id="emailAddress" type="email" multiple />

28 dưới dạng trình giữ chỗ bất kỳ lúc nào trường trống. Ngoài ra, bằng cách sử dụng thuộc tính

<input id="emailAddress" type="email" multiple />

3, hộp được định cấu hình để cho phép người dùng nhập 0 hoặc nhiều địa chỉ email, được phân tách bằng dấu phẩy, như được mô tả trong Cho phép nhiều địa chỉ email. Cuối cùng, thuộc tính

<input id="emailAddress" type="email" multiple />

18 chứa ID của một

<input id="emailAddress" type="email" multiple />

24 có các

<input id="emailAddress" type="email" multiple />

72 chỉ định một tập hợp các giá trị được đề xuất mà người dùng có thể chọn

Là một điểm nhấn bổ sung, phần tử

<input id="emailAddress" type="email" multiple />

11 được sử dụng để thiết lập nhãn cho hộp nhập email, với thuộc tính

<input id="emailAddress" type="email" multiple />

34 của nó tham chiếu ID

<input id="emailAddress" type="email" multiple />

27 của phần tử

<input id="emailAddress" type="email" multiple />

1. Bằng cách liên kết hai phần tử theo cách này, nhấp vào nhãn sẽ tập trung vào phần tử đầu vào

Có thẻ email trong HTML không?

Thẻ email HTML . Trong khi sử dụng thẻ làm thẻ email, bạn sẽ sử dụng mailto. địa chỉ email cùng với thuộc tính href. Sau đây là cú pháp sử dụng mailto thay vì sử dụng http. HTML tag provides you option to specify an email address to send an email. While using tag as an email tag, you will use mailto: email address along with href attribute. Following is the syntax of using mailto instead of using http.

Làm cách nào để đặt email trong HTML?

Tự tạo email HTML .

Mở một ứng dụng nơi bạn có thể nhập mã HTML. .

Bắt đầu loại tài liệu HTML của bạn. .

Tạo phần thân và bảng chính. .

Thiết kế cấu trúc mẫu email và tiêu đề. .

Tạo khu vực nội dung. .

Thay đổi kiểu của chân trang mẫu email. .

Tạo kiểu cho văn bản. .

Kiểm tra email

programming html

Làm thế nào để bạn thêm một thẻ email trong html?

Thử nó

Giá trị

thuộc tính bổ sung

danh sách

độ dài tối đa

Độ dài nhỏ nhất

nhiều

mẫu

<input id="emailAddress" type="email" multiple /> 06

<input id="emailAddress" type="email" multiple /> 09

<input id="emailAddress" type="email" multiple /> 05

Sử dụng đầu vào email

Một đầu vào email đơn giản

Cho phép nhiều địa chỉ email

Trình giữ chỗ

Kiểm soát kích thước đầu vào

Kích thước phần tử đầu vào vật lý

Độ dài giá trị phần tử

Cung cấp các tùy chọn mặc định

Cung cấp một mặc định duy nhất bằng thuộc tính giá trị

Cung cấp các giá trị được đề xuất

Thẩm định

Xác thực cơ bản

xác thực mẫu

ví dụ

Có thẻ email trong HTML không?

Làm cách nào để đặt email trong HTML?

Bài Viết Liên Quan

MỚI CẬP NHẬP

Xem Nhiều

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội