Tag p cho phép chúng ta làm gì khi viết chương trình trang web

Trong bài viết này, chúng ta sẽ cùng nói về các phần tử <input> hỗ trợ tạo ra các biểu mẫu nhập liệu để thu thập thông tin từ người sử dụng. Ví dụ thường thấy của các phần tử <input> và các biểu mẫu nhập liệu trên các trang web là khung đăng nhập tài khoản người dùng, ô tìm kiếm, v.v.... Hãy mở đầu với một vài trường nhập liệu văn bản.

Các phần tử input cơ bản nhất

Kiểu input cơ bản nhất được thấy trên hầu hết các trang web là

<form>
   Tên của bạn:<br>
   <input type="text" name="name"><br>
   Tin nhắn:<br>
   <input type="text" name="message"><br>
   <br>
   <button type="submit">Gửi</button>
   <button type="reset">Đặt lại</button>
</form>

Trường text thông thường:<br>
<input type="text" placeholder="Bạn có thể gõ chữ ở đây..."><br>
Trường text mật khẩu:<br>
<input type="password" placeholder="Mật khẩu sẽ được ẩn đi">

Liên kết tham khảo: thuộc tính

<form>
   Tên của bạn:<br>
   <input type="text" name="name"><br>
   Tin nhắn:<br>
   <input type="text" name="message"><br>
   <br>
   <button type="submit">Gửi</button>
   <button type="reset">Đặt lại</button>
</form>

Container <form> Tên của bạn:<br> <input type="text" name="name"><br> Tin nhắn:<br> <input type="text" name="message"><br> <br> <button type="submit">Gửi</button> <button type="reset">Đặt lại</button> </form> 2

Để đóng gói dữ liệu thu thập được từ người sử dụng và gửi về một máy chủ thực hiện dịch vụ, các thẻ input cần được đặt trong một container

<form>
   Tên của bạn:<br>
   <input type="text" name="name"><br>
   Tin nhắn:<br>
   <input type="text" name="message"><br>
   <br>
   <button type="submit">Gửi</button>
   <button type="reset">Đặt lại</button>
</form>

<form>
   Tên của bạn:<br>
   <input type="text" name="name"><br>
   Tin nhắn:<br>
   <input type="text" name="message"><br>
   <br>
   <button type="submit">Gửi</button>
   <button type="reset">Đặt lại</button>
</form>

<form>
   Tên của bạn:<br>
   <input type="text" name="name"><br>
   Tin nhắn:<br>
   <input type="text" name="message"><br>
   <br>
   <button type="submit">Gửi</button>
   <button type="reset">Đặt lại</button>
</form>

Khi các input được sử dụng trong một biểu mẫu để thu thập và gửi thông tin tới máy chủ, mỗi input sẽ cần được gắn tên bằng thuộc tính

<form>
   Tên của bạn:<br>
   <input type="text" name="name"><br>
   Tin nhắn:<br>
   <input type="text" name="message"><br>
   <br>
   <button type="submit">Gửi</button>
   <button type="reset">Đặt lại</button>
</form>

Bảo mật khi nhận & gửi dữ liệu

Theo thiết lập mặc định thì khi một biểu mẫu được xác nhận gửi đi, các thông tin thu thập được sẽ được hiển thị ngay trên thanh địa chỉ của trình duyệt web mà bạn đang sử dụng.

Semi Dev @thinhtranhnvn

Theo dõi

3.8K 180 188

Đã đăng vào thg 3 10, 4:57 SA 2 phút đọc

475

0

0

• Báo cáo
• Thêm vào series của tôi

Trong bài viết này, chúng ta sẽ cùng nói về các phần tử <input> hỗ trợ tạo ra các biểu mẫu nhập liệu để thu thập thông tin từ người sử dụng. Ví dụ thường thấy của các phần tử <input> và các biểu mẫu nhập liệu trên các trang web là khung đăng nhập tài khoản người dùng, ô tìm kiếm, v.v.... Hãy mở đầu với một vài trường nhập liệu văn bản.

Các phần tử input cơ bản nhất

Kiểu input cơ bản nhất được thấy trên hầu hết các trang web là

<form>
   Tên của bạn:<br>
   <input type="text" name="name"><br>
   Tin nhắn:<br>
   <input type="text" name="message"><br>
   <br>
   <button type="submit">Gửi</button>
   <button type="reset">Đặt lại</button>
</form>

Trường text thông thường:<br>
<input type="text" placeholder="Bạn có thể gõ chữ ở đây..."><br>
Trường text mật khẩu:<br>
<input type="password" placeholder="Mật khẩu sẽ được ẩn đi">

Liên kết tham khảo: thuộc tính

<form>
   Tên của bạn:<br>
   <input type="text" name="name"><br>
   Tin nhắn:<br>
   <input type="text" name="message"><br>
   <br>
   <button type="submit">Gửi</button>
   <button type="reset">Đặt lại</button>
</form>

Container <form> Tên của bạn:<br> <input type="text" name="name"><br> Tin nhắn:<br> <input type="text" name="message"><br> <br> <button type="submit">Gửi</button> <button type="reset">Đặt lại</button> </form> 2

Để đóng gói dữ liệu thu thập được từ người sử dụng và gửi về một máy chủ thực hiện dịch vụ, các thẻ input cần được đặt trong một container

<form>
   Tên của bạn:<br>
   <input type="text" name="name"><br>
   Tin nhắn:<br>
   <input type="text" name="message"><br>
   <br>
   <button type="submit">Gửi</button>
   <button type="reset">Đặt lại</button>
</form>

<form>
   Tên của bạn:<br>
   <input type="text" name="name"><br>
   Tin nhắn:<br>
   <input type="text" name="message"><br>
   <br>
   <button type="submit">Gửi</button>
   <button type="reset">Đặt lại</button>
</form>

<form>
   Tên của bạn:<br>
   <input type="text" name="name"><br>
   Tin nhắn:<br>
   <input type="text" name="message"><br>
   <br>
   <button type="submit">Gửi</button>
   <button type="reset">Đặt lại</button>
</form>

Khi các input được sử dụng trong một biểu mẫu để thu thập và gửi thông tin tới máy chủ, mỗi input sẽ cần được gắn tên bằng thuộc tính

<form>
   Tên của bạn:<br>
   <input type="text" name="name"><br>
   Tin nhắn:<br>
   <input type="text" name="message"><br>
   <br>
   <button type="submit">Gửi</button>
   <button type="reset">Đặt lại</button>
</form>

Bảo mật khi nhận & gửi dữ liệu

Theo thiết lập mặc định thì khi một biểu mẫu được xác nhận gửi đi, các thông tin thu thập được sẽ được hiển thị ngay trên thanh địa chỉ của trình duyệt web mà bạn đang sử dụng.

Điều này không có vấn đề gì đối với những thông tin chung chung như từ khóa tìm kiếm google, hay từ khóa tìm kiếm sản phẩm trên một trang web bán hàng online. Tuy nhiên, trong trường hợp những thông tin thu thập được rất quan trọng như thông tin đăng nhập, thì chúng ta cần sử dụng thuộc tính

<form>
   Tên của bạn:<br>
   <input type="text" name="name"><br>
   Tin nhắn:<br>
   <input type="text" name="message"><br>
   <br>
   <button type="submit">Gửi</button>
   <button type="reset">Đặt lại</button>
</form>

Thuộc tính

<form>
   Tên của bạn:<br>
   <input type="text" name="name"><br>
   Tin nhắn:<br>
   <input type="text" name="message"><br>
   <br>
   <button type="submit">Gửi</button>
   <button type="reset">Đặt lại</button>
</form>

<form method="post">
   <!-- inputs & buttons -->
</form>

<form method="post">
   <!-- inputs & buttons -->
</form>

<form method="post">
   <!-- inputs & buttons -->
</form>

<form method="post">
   <!-- inputs & buttons -->
</form>