Tự học HTML: Các Biểu mẫu HTML

Tự học HTML: Các Biểu mẫu HTML

Tham gia khóa học này và tìm hiểu về hoạt động bên trong của một biểu mẫu HTML! Tìm hiểu cách tạo biểu mẫu của riêng bạn và tích hợp xác thực HTML5.

Phần tử <form> HTML được sử dụng để thu thập và gửi thông tin đến một nguồn bên ngoài.

<form>có thể chứa các yếu tố đầu vào khác nhau. Khi người dùng gửi biểu mẫu, thông tin trong các phần tử đầu vào này được chuyển đến nguồn có tên trong action thuộc tính của biểu mẫu.

Các bài viết liên quan:

BIỂU MẪU HTML

Giới thiệu về Biểu mẫu HTML

Biểu mẫu là một phần của cuộc sống hàng ngày. Khi chúng ta sử dụng một hình thức vật lý trong cuộc sống thực, chúng ta viết ra thông tin và đưa nó cho ai đó xử lý. Hãy nghĩ đến những lần bạn phải điền thông tin cho các đơn xin việc khác nhau như công việc, tài khoản ngân hàng hoặc bỏ thẻ gợi ý đã hoàn thành – mỗi trường hợp là một biểu mẫu!

Cũng giống như dạng vật lý, một <form> phần tử HTML có nhiệm vụ thu thập thông tin để gửi đi nơi khác. Mỗi khi duyệt internet, chúng ta tiếp xúc với nhiều hình thức và thậm chí chúng ta có thể không nhận ra. Có một cơ hội tốt là nếu bạn đang nhập vào một trường văn bản hoặc cung cấp một đầu vào, thì trường mà bạn đang nhập là một phần của a <form>!

Trong bài học này, chúng ta sẽ xem xét cấu trúc và cú pháp của a <form>và nhiều phần tử chứa nó.

Cách thức hoạt động của một biểu mẫu

Chúng ta có thể coi Internet như một mạng lưới các máy tính gửi và nhận thông tin. Máy tính cần một yêu cầu HTTP để biết cách giao tiếp. Yêu cầu HTTP hướng dẫn máy tính nhận cách xử lý thông tin đến. Có thể tìm thấy thêm thông tin trong bài viết của chúng tôi về các yêu cầu HTTP .

Phần <form>tử là một công cụ tuyệt vời để thu thập thông tin, nhưng sau đó chúng ta cần gửi thông tin đó đến một nơi khác để xử lý. Chúng ta cần cung cấp cho <form>phần tử cả vị trí của <form>thông tin và yêu cầu HTTP cần thực hiện.

Nhập văn bản

Nếu chúng tôi muốn tạo một trường đầu vào trong của chúng tôi <form>, chúng tôi sẽ cần sự trợ giúp của <input>phần tử.

Phần <input>tử có một type thuộc tính xác định cách nó hiển thị trên trang web và loại dữ liệu mà nó có thể chấp nhận.

Giá trị đầu tiên cho type thuộc tính mà chúng ta sẽ khám phá là “text”. Khi chúng tôi tạo một <input>phần tử type=”text”, nó sẽ hiển thị một trường văn bản mà người dùng có thể nhập vào. Điều quan trọng là chúng tôi phải bao gồm một name thuộc tính cho <input>- không có name thuộc tính, thông tin trong thuộc tính <input>sẽ không được gửi khi <form>được gửi.

Thêm label

Trong bài tập trước, chúng ta đã tạo một <input>phần tử nhưng chúng ta không đưa vào bất cứ thứ gì để giải thích nó <input>được sử dụng để làm gì. Để người dùng xác định đúng một phần tử, <input>chúng tôi sử dụng <label>phần tử được đặt tên thích hợp .

Phần <label>tử có thẻ mở và thẻ đóng và hiển thị văn bản được viết giữa thẻ mở và thẻ đóng. Để liên kết a <label>và an <input>, <input>cần có một id thuộc tính. 

Nhập mật khẩu

Hãy nghĩ về tất cả những lần chúng ta phải đặt thông tin nhạy cảm, như mật khẩu hoặc mã PIN, vào một <form>. Chúng tôi sẽ không muốn thông tin của chúng tôi bị nhìn thấy bởi bất kỳ ai nhìn trộm qua vai chúng tôi! May mắn thay, chúng tôi có type=”password”thuộc tính cho <input>!

Một <input type =”password”>phần tử sẽ thay thế văn bản đầu vào bằng một ký tự khác như dấu hoa thị (*) hoặc dấu chấm (•). Đoạn mã dưới đây cung cấp một ví dụ về cách tạo trường mật khẩu:

<form>

  <label for=”user-password”>Password: </label>

  <input type=”password” id=”user-password” name=”user-password”>

</form>

Nhập số

Bây giờ chúng ta đã xem xét hai typer thuộc tính <input>liên quan đến văn bản. Tuy nhiên, chúng tôi có thể muốn người dùng của mình nhập một số – trong trường hợp đó, chúng tôi có thể đặt type thuộc tính thành… (bạn đoán vậy)… “number”!

Bằng cách thiết lập type=”number”cho một <input>chúng ta có thể hạn chế những gì người dùng gõ vào trường đầu vào chỉ số (và một vài ký tự đặc biệt như -, +và .). Chúng tôi cũng có thể cung cấp một step thuộc tính tạo ra các mũi tên bên trong trường đầu vào để tăng hoặc giảm giá trị của step thuộc tính. Dưới đây là mã cần thiết để hiển thị trường đầu vào cho các số:

Đầu vào phạm vi

<form>

  <label for=”years”> Years of experience: </label>

  <input id=”years” name=”years” type=”number” step=”1″>

</form>

Sử dụng dấu <input type=”number”> là tuyệt vời nếu chúng tôi muốn cho phép người dùng nhập bất kỳ số nào họ chọn. Tuy nhiên, nếu chúng tôi muốn giới hạn số lượng mà người dùng của chúng tôi có thể nhập, chúng tôi có thể cân nhắc sử dụng một type giá trị khác . Một tùy chọn khác chúng ta có thể sử dụng được thiết lập type để “range”mà tạo ra một thanh trượt.

Để đặt giá trị tối thiểu và tối đa của thanh trượt, chúng tôi gán giá trị cho thuộc tính min và max của <input>. Chúng tôi cũng có thể kiểm soát mức độ trơn tru và linh hoạt của thanh trượt bằng cách gán cho step thuộc tính một giá trị. Các step giá trị nhỏ hơn sẽ làm cho thanh trượt trôi chảy hơn, trong khi các step giá trị lớn hơn sẽ làm cho thanh trượt di chuyển dễ dàng hơn. Hãy xem mã để tạo thanh trượt:

<form>

  <label for=”volume”> Volume Control</label>

  <input id=”volume” name=”volume” type=”range” min=”0″ max=”100″ step=”1″>

</form>

Đầu vào hộp kiểm

Cho đến nay, các loại đầu vào mà chúng tôi cho phép đều là những lựa chọn đơn lẻ. Nhưng, điều gì sẽ xảy ra nếu chúng tôi đưa ra nhiều tùy chọn cho người dùng và cho phép họ chọn bất kỳ tùy chọn nào? Có vẻ như chúng ta có thể sử dụng hộp kiểm! Trong một, <form>chúng tôi sẽ sử dụng <input>phần tử và tập hợp type=”checkbox”. Kiểm tra mã được sử dụng để tạo nhiều hộp kiểm:

<form>

  <p>Choose your pizza toppings:</p>

  <label for=”cheese”>Extra cheese</label>

  <input id=”cheese” name=”topping” type=”checkbox” value=”cheese”>

  <br>

  <label for=”pepperoni”>Pepperoni</label>

  <input id=”pepperoni” name=”topping” type=”checkbox” value=”pepperoni”>

  <br>

  <label for=”anchovy”>Anchovy</label>

  <input id=”anchovy” name=”topping” type=”checkbox” value=”anchovy”>

</form>

Đầu vào nút radio

Hộp kiểm hoạt động tốt nếu chúng tôi muốn cung cấp cho người dùng nhiều tùy chọn và để họ chọn một hoặc nhiều tùy chọn. Tuy nhiên, có những trường hợp chúng tôi muốn đưa ra nhiều tùy chọn và chỉ cho phép một lựa chọn – như hỏi người dùng xem họ đồng ý hay không đồng ý với các điều khoản và điều kiện. Hãy xem qua mã được sử dụng để tạo các nút radio:

<form>

  <p>What is sum of 1 + 1?</p>

  <input type=”radio” id=”two” name=”answer” value=”2″>

  <label for=”two”>2</label>

  <br>

  <input type=”radio” id=”eleven” name=”answer” value=”11″>

  <label for=”eleven”>11</label>

</form>

Danh sách thả xuống

Các nút radio rất tuyệt nếu chúng ta muốn người dùng chọn một tùy chọn trong số một vài tùy chọn hiển thị, nhưng hãy tưởng tượng nếu chúng ta có toàn bộ danh sách tùy chọn! Tình trạng này có thể nhanh chóng dẫn đến rất nhiều nút radio để theo dõi.

Một giải pháp thay thế là sử dụng danh sách thả xuống để cho phép người dùng của chúng tôi chọn một tùy chọn từ danh sách có tổ chức. Đây là mã để tạo menu thả xuống:

<form>

  <label for=”lunch”>What’s for lunch?</label>

  <select id=”lunch” name=”lunch”>

    <option value=”pizza”>Pizza</option>

    <option value=”curry”>Curry</option>

    <option value=”salad”>Salad</option>

    <option value=”ramen”>Ramen</option>

    <option value=”tacos”>Tacos</option>

  </select>

</form>

Đầu vào Datalist

Ngay cả khi chúng tôi có một danh sách thả xuống có tổ chức, nếu danh sách có nhiều tùy chọn, người dùng có thể cảm thấy nhàm chán khi cuộn qua toàn bộ danh sách để tìm một tùy chọn. Đó là nơi mà việc sử dụng <datalist>phần tử trở nên hữu ích.

Các <datalist>được sử dụng với một <input type=”text”>phần tử. Trường này <input>tạo ra một trường văn bản mà người dùng có thể nhập và lọc các tùy chọn từ <datalist>. Hãy xem qua một ví dụ cụ thể:

<form>

  <label for=”city”>Ideal city to visit?</label>

  <input type=”text” list=”cities” id=”city” name=”city”>

  <datalist id=”cities”>

    <option value=”New York City”></option>

    <option value=”Tokyo”></option>

    <option value=”Barcelona”></option>

    <option value=”Mexico City”></option>

    <option value=”Melbourne”></option>

    <option value=”Other”></option>  

  </datalist>

</form>

Lưu ý, trong đoạn mã trên, chúng ta có một <input>có một listthuộc tính. Các <input>được liên kết với thuộc tính <datalist>via <input>’s listvà thuộc tính idcủa <datalist>.

Phần tử Textarea

Một <input>phần tử với type=”text”tạo ra một trường nhập hàng đơn để người dùng nhập thông tin. Tuy nhiên, có những trường hợp người dùng cần viết thêm thông tin, chẳng hạn như một bài đăng trên blog. Trong những trường hợp như vậy, thay vì sử dụng một <input>, chúng tôi có thể sử dụng <textarea>.

Phần <textarea>tử được sử dụng để tạo trường văn bản lớn hơn để người dùng viết nhiều văn bản hơn. Chúng tôi có thể thêm các thuộc tính rowsvà colsđể xác định số lượng hàng và cột cho <textarea>. Hãy xem:

<form>

  <label for=”blog”>New Blog Post: </label>

  <br>

  <textarea id=”blog” name=”blog” rows=”5″ cols=”30″>

  </textarea>

</form>

Gửi biểu mẫu

Hãy nhớ rằng, mục đích của biểu mẫu là thu thập thông tin sẽ được gửi. Đó là vai trò của nút gửi – người dùng nhấp vào nút đó khi họ hoàn tất việc điền thông tin vào <form>và họ đã sẵn sàng gửi đi. Bây giờ chúng ta đã xem qua cách tạo các phần tử đầu vào khác nhau, bây giờ chúng ta hãy xem cách tạo một nút gửi!

Để thực hiện một nút gửi trong một <form>, chúng ta sẽ sử dụng đáng tin cậy <input>phần tử và thiết lập type để “submit”.

Ôn tập

Làm việc tốt khi tương tác với <form>yếu tố cực kỳ phổ biến và hữu ích !

Trong bài học này, chúng ta đã xem qua:

  • Mục đích của a <form>là cho phép người dùng nhập thông tin và gửi thông tin đó.
  • Các <form>’s action thuộc tính xác định nơi thông tin của hình thức đi.
  • Các <form>’s method thuộc tính xác định như thế nào thông tin được gửi và xử lý.
  • Để thêm các trường cho người dùng nhập thông tin, chúng tôi sử dụng <input>phần tử và đặt type thuộc tính thành trường chúng tôi chọn:
  • Cài đặt type để “text”tạo một trường hàng đơn để nhập văn bản.
  • Cài đặt type để “password”tạo một trường hàng duy nhất kiểm duyệt đầu vào văn bản.
  • Cài đặt type để “number”tạo một trường hàng duy nhất để nhập số.
  • Cài đặt type để “range”tạo một thanh trượt để chọn từ một loạt các số.
  • Cài đặt type để “checkbox”tạo một hộp kiểm duy nhất có thể được ghép nối với các hộp kiểm khác.
  • Cài đặt type để “radio”tạo một nút radio có thể được ghép nối với các nút radio khác.
  • Đặt type thành “list”sẽ ghép nối phần tử <input>với một <datalist>phần tử nếu id cả hai đều giống nhau.
  • Cài đặt type để “submit”tạo nút gửi.
  • Một <select>phần tử được điền với <option>các phần tử và hiển thị lựa chọn danh sách thả xuống.
  • Một <datalist>phần tử được điền với <option>các phần tử và hoạt động với một <input>để tìm kiếm thông qua các lựa chọn.
  • Phần <textarea>tử là trường nhập văn bản có vùng có thể tùy chỉnh.
  • Khi một <form>được gửi, các name trường chấp nhận đầu vào và các value trường đó được gửi dưới dạng name=value cặp.

Sử dụng <form>phần tử này kết hợp với các phần tử khác được liệt kê ở trên cho phép chúng tôi tạo các trang web có cân nhắc đến mong muốn và nhu cầu của người dùng. Hãy tận dụng cơ hội để nắm lấy những gì bạn đã học và áp dụng nó!

Nếu bạn muốn thử thách bản thân:

  • Tạo biểu mẫu có nhiều trường chấp nhận đầu vào của người dùng.
  • Thêm hai bộ nút radio hoặc hộp kiểm riêng biệt.
  • Tìm kiếm cách thêm trình giữ chỗ (gợi ý gợi ý) vào trường đầu vào. 
  • Trình giữ chỗ hiển thị khi trường không có value, nó sẽ biến mất sau khi người dùng nhập hoặc chọn nội dung nào đó trong trường.

Leave a Reply