Hướng dẫn what is html form and how does it work? - biểu mẫu html là gì và nó hoạt động như thế nào?

Các biểu mẫu web là gì?

Các biểu mẫu web là một trong những điểm tương tác chính giữa người dùng và trang web hoặc ứng dụng. Các biểu mẫu cho phép người dùng nhập dữ liệu, thường được gửi đến máy chủ web để xử lý và lưu trữ (xem gửi dữ liệu biểu mẫu sau trong mô-đun) hoặc được sử dụng trên phía máy khách để cập nhật ngay giao diện theo một cách nào đó (ví dụ: thêm một mục khác vào danh sách hoặc hiển thị hoặc ẩn tính năng UI). are one of the main points of interaction between a user and a website or application. Forms allow users to enter data, which is generally sent to a web server for processing and storage (see Sending form data later in the module), or used on the client-side to immediately update the interface in some way (for example, add another item to a list, or show or hide a UI feature).

HTML của biểu mẫu được tạo thành từ một hoặc nhiều điều khiển biểu mẫu (đôi khi được gọi là Widget), cộng với một số yếu tố bổ sung để giúp cấu trúc biểu mẫu tổng thể - chúng thường được gọi là các dạng HTML. Các điều khiển có thể là các trường văn bản đơn hoặc nhiều dòng, hộp thả xuống, nút, hộp kiểm hoặc nút radio và hầu hết được tạo bằng phần tử <input>, mặc dù có một số yếu tố khác để tìm hiểu về.form controls (sometimes called widgets), plus some additional elements to help structure the overall form — they are often referred to as HTML forms. The controls can be single or multi-line text fields, dropdown boxes, buttons, checkboxes, or radio buttons, and are mostly created using the <input> element, although there are some other elements to learn about too.

Kiểm soát biểu mẫu cũng có thể được lập trình để thực thi các định dạng hoặc giá trị cụ thể được nhập (xác thực biểu mẫu) và được ghép nối với các nhãn văn bản mô tả mục đích của chúng cho người dùng được nhìn thấy và khiếm thị.form validation), and paired with text labels that describe their purpose to both sighted and visually impaired users.

Thiết kế hình thức của bạn

Trước khi bắt đầu mã, luôn luôn tốt hơn để lùi lại và dành thời gian để suy nghĩ về hình thức của bạn. Thiết kế một mockup nhanh sẽ giúp bạn xác định đúng bộ dữ liệu bạn muốn yêu cầu người dùng của bạn nhập. Từ quan điểm trải nghiệm người dùng (UX), điều quan trọng cần nhớ là hình thức của bạn càng lớn, bạn càng có nhiều nguy cơ làm mọi người thất vọng và mất người dùng. Giữ cho nó đơn giản và tập trung: Chỉ yêu cầu dữ liệu bạn hoàn toàn cần.

Thiết kế các hình thức là một bước quan trọng khi bạn đang xây dựng một trang web hoặc ứng dụng. Nó nằm ngoài phạm vi của bài viết này để bao gồm trải nghiệm người dùng về các biểu mẫu, nhưng nếu bạn muốn đào sâu vào chủ đề đó, bạn nên đọc các bài viết sau:

• Tạp chí Smashing có một số bài viết tốt về các mẫu UX, bao gồm một hướng dẫn mở rộng cũ hơn nhưng vẫn có liên quan đến bài viết về khả năng sử dụng Web Form.
• Uxmatters cũng là một nguồn tài nguyên rất chu đáo với lời khuyên tốt từ các thực tiễn tốt nhất cơ bản đến các mối quan tâm phức tạp như hình thức nhân.

Trong bài viết này, chúng tôi sẽ xây dựng một hình thức liên hệ đơn giản. Hãy tạo một bản phác thảo sơ bộ.

Biểu mẫu của chúng tôi sẽ chứa ba trường văn bản và một nút. Chúng tôi đang yêu cầu người dùng cho tên của họ, e-mail của họ và tin nhắn họ muốn gửi. Nhấn nút sẽ gửi dữ liệu của họ đến máy chủ web.

Học tập tích cực: Thực hiện hình thức HTML của chúng tôi

OK, chúng ta hãy thực hiện việc tạo HTML cho biểu mẫu của chúng tôi. Chúng tôi sẽ sử dụng các phần tử HTML sau:

<form action="/my-handling-form-page" method="post">
  <ul>
    <li>
      <label for="name">Name:</label>
      <input type="text" id="name" name="user_name" />
    </li>
    <li>
      <label for="mail">E-mail:</label>
      <input type="email" id="mail" name="user_email" />
    </li>
    <li>
      <label for="msg">Message:</label>
      <textarea id="msg" name="user_message"></textarea>
    </li>
  </ul>
</form>

<form action="/my-handling-form-page" method="post">
  <ul>
    <li>
      <label for="name">Name:</label>
      <input type="text" id="name" name="user_name" />
    </li>
    <li>
      <label for="mail">E-mail:</label>
      <input type="email" id="mail" name="user_email" />
    </li>
    <li>
      <label for="msg">Message:</label>
      <textarea id="msg" name="user_message"></textarea>
    </li>
  </ul>
</form>

<form action="/my-handling-form-page" method="post">
  <ul>
    <li>
      <label for="name">Name:</label>
      <input type="text" id="name" name="user_name" />
    </li>
    <li>
      <label for="mail">E-mail:</label>
      <input type="email" id="mail" name="user_email" />
    </li>
    <li>
      <label for="msg">Message:</label>
      <textarea id="msg" name="user_message"></textarea>
    </li>
  </ul>
</form>

<form action="/my-handling-form-page" method="post">
  <ul>
    <li>
      <label for="name">Name:</label>
      <input type="text" id="name" name="user_name" />
    </li>
    <li>
      <label for="mail">E-mail:</label>
      <input type="email" id="mail" name="user_email" />
    </li>
    <li>
      <label for="msg">Message:</label>
      <textarea id="msg" name="user_message"></textarea>
    </li>
  </ul>
</form>

Trước khi bạn đi xa hơn, hãy tạo một bản sao cục bộ của mẫu HTML đơn giản của chúng tôi - bạn sẽ nhập biểu mẫu HTML của mình vào đây.

Phần tử <form action="/my-handling-form-page" method="post"> <ul> <li> <label for="name">Name:</label> <input type="text" id="name" name="user_name" /> </li> <li> <label for="mail">E-mail:</label> <input type="email" id="mail" name="user_email" /> </li> <li> <label for="msg">Message:</label> <textarea id="msg" name="user_message"></textarea> </li> </ul> </form> 0

Tất cả các hình thức bắt đầu với một phần tử

<form action="/my-handling-form-page" method="post">
  <ul>
    <li>
      <label for="name">Name:</label>
      <input type="text" id="name" name="user_name" />
    </li>
    <li>
      <label for="mail">E-mail:</label>
      <input type="email" id="mail" name="user_email" />
    </li>
    <li>
      <label for="msg">Message:</label>
      <textarea id="msg" name="user_message"></textarea>
    </li>
  </ul>
</form>

<form action="/my-handling-form-page" method="post">…</form>

Yếu tố này chính thức xác định một biểu mẫu. Đó là một phần tử container như phần tử

<form action="/my-handling-form-page" method="post">
  <ul>
    <li>
      <label for="name">Name:</label>
      <input type="text" id="name" name="user_name" />
    </li>
    <li>
      <label for="mail">E-mail:</label>
      <input type="email" id="mail" name="user_email" />
    </li>
    <li>
      <label for="msg">Message:</label>
      <textarea id="msg" name="user_message"></textarea>
    </li>
  </ul>
</form>

<form action="/my-handling-form-page" method="post">
  <ul>
    <li>
      <label for="name">Name:</label>
      <input type="text" id="name" name="user_name" />
    </li>
    <li>
      <label for="mail">E-mail:</label>
      <input type="email" id="mail" name="user_email" />
    </li>
    <li>
      <label for="msg">Message:</label>
      <textarea id="msg" name="user_message"></textarea>
    </li>
  </ul>
</form>

<form action="/my-handling-form-page" method="post">
  <ul>
    <li>
      <label for="name">Name:</label>
      <input type="text" id="name" name="user_name" />
    </li>
    <li>
      <label for="mail">E-mail:</label>
      <input type="email" id="mail" name="user_email" />
    </li>
    <li>
      <label for="msg">Message:</label>
      <textarea id="msg" name="user_message"></textarea>
    </li>
  </ul>
</form>

<input type="text" value="by default this element is filled with this text" />

• Thuộc tính

  <form action="/my-handling-form-page" method="post">
    <ul>
      <li>
        <label for="name">Name:</label>
        <input type="text" id="name" name="user_name" />
      </li>
      <li>
        <label for="mail">E-mail:</label>
        <input type="email" id="mail" name="user_email" />
      </li>
      <li>
        <label for="msg">Message:</label>
        <textarea id="msg" name="user_message"></textarea>
      </li>
    </ul>
  </form>
  

  9 xác định vị trí (URL) nơi dữ liệu được thu thập của biểu mẫu phải được gửi khi được gửi.
• Thuộc tính

  <input type="text" value="by default this element is filled with this text" />
  

  0 xác định phương thức HTTP nào để gửi dữ liệu với (thường là

  <input type="text" value="by default this element is filled with this text" />
  

  3 hoặc

  <input type="text" value="by default this element is filled with this text" />
  

  4).

Lưu ý: Chúng tôi sẽ xem xét cách các thuộc tính đó hoạt động trong bài viết dữ liệu biểu mẫu của chúng tôi sau này. We'll look at how those attributes work in our Sending form data article later on.

Hiện tại, hãy thêm phần tử

<form action="/my-handling-form-page" method="post">
  <ul>
    <li>
      <label for="name">Name:</label>
      <input type="text" id="name" name="user_name" />
    </li>
    <li>
      <label for="mail">E-mail:</label>
      <input type="email" id="mail" name="user_email" />
    </li>
    <li>
      <label for="msg">Message:</label>
      <textarea id="msg" name="user_message"></textarea>
    </li>
  </ul>
</form>

<input type="text" value="by default this element is filled with this text" />

Các yếu tố <form action="/my-handling-form-page" method="post"> <ul> <li> <label for="name">Name:</label> <input type="text" id="name" name="user_name" /> </li> <li> <label for="mail">E-mail:</label> <input type="email" id="mail" name="user_email" /> </li> <li> <label for="msg">Message:</label> <textarea id="msg" name="user_message"></textarea> </li> </ul> </form> 1, <input> và <form action="/my-handling-form-page" method="post"> <ul> <li> <label for="name">Name:</label> <input type="text" id="name" name="user_name" /> </li> <li> <label for="mail">E-mail:</label> <input type="email" id="mail" name="user_email" /> </li> <li> <label for="msg">Message:</label> <textarea id="msg" name="user_message"></textarea> </li> </ul> </form> 3

Mẫu liên hệ của chúng tôi không phức tạp: Phần nhập dữ liệu chứa ba trường văn bản, mỗi trường có

<form action="/my-handling-form-page" method="post">
  <ul>
    <li>
      <label for="name">Name:</label>
      <input type="text" id="name" name="user_name" />
    </li>
    <li>
      <label for="mail">E-mail:</label>
      <input type="email" id="mail" name="user_email" />
    </li>
    <li>
      <label for="msg">Message:</label>
      <textarea id="msg" name="user_message"></textarea>
    </li>
  </ul>
</form>

• Trường đầu vào cho tên là một trường văn bản một dòng.
• Trường đầu vào cho e-mail là đầu vào của email loại: trường văn bản một dòng chỉ chấp nhận địa chỉ e-mail.
• Trường đầu vào cho thông báo là

  <form action="/my-handling-form-page" method="post">
    <ul>
      <li>
        <label for="name">Name:</label>
        <input type="text" id="name" name="user_name" />
      </li>
      <li>
        <label for="mail">E-mail:</label>
        <input type="email" id="mail" name="user_email" />
      </li>
      <li>
        <label for="msg">Message:</label>
        <textarea id="msg" name="user_message"></textarea>
      </li>
    </ul>
  </form>
  

  3; một trường văn bản đa dòng.

Về mã HTML, chúng tôi cần một cái gì đó như sau để thực hiện các tiện ích hình thức này:

<form action="/my-handling-form-page" method="post">
  <ul>
    <li>
      <label for="name">Name:</label>
      <input type="text" id="name" name="user_name" />
    </li>
    <li>
      <label for="mail">E-mail:</label>
      <input type="email" id="mail" name="user_email" />
    </li>
    <li>
      <label for="msg">Message:</label>
      <textarea id="msg" name="user_message"></textarea>
    </li>
  </ul>
</form>

Cập nhật mã biểu mẫu của bạn để trông giống như ở trên.

Các yếu tố

<textarea>
by default this element is filled with this text
</textarea>

<textarea>
by default this element is filled with this text
</textarea>

<form action="/my-handling-form-page" method="post">
  <ul>
    <li>
      <label for="name">Name:</label>
      <input type="text" id="name" name="user_name" />
    </li>
    <li>
      <label for="mail">E-mail:</label>
      <input type="email" id="mail" name="user_email" />
    </li>
    <li>
      <label for="msg">Message:</label>
      <textarea id="msg" name="user_message"></textarea>
    </li>
  </ul>
</form>

<textarea>
by default this element is filled with this text
</textarea>

Có rất nhiều lợi ích khi thực hiện việc này - nó liên kết nhãn với điều khiển biểu mẫu, cho phép người dùng chuột, trackpad và cảm ứng nhấp vào nhãn để kích hoạt điều khiển tương ứng và nó cũng cung cấp tên có thể truy cập cho người đọc màn hình để đọc ra cho người dùng của họ. Bạn sẽ tìm thấy thêm chi tiết về nhãn biểu mẫu trong cách cấu trúc biểu mẫu web.

Trên phần tử <input>, thuộc tính quan trọng nhất là thuộc tính

<textarea>
by default this element is filled with this text
</textarea>

• Trong ví dụ đơn giản của chúng tôi, chúng tôi sử dụng văn bản giá trị cho đầu vào đầu tiên - giá trị mặc định cho thuộc tính này. Nó đại diện cho một trường văn bản một dòng cơ bản chấp nhận bất kỳ loại đầu vào văn bản nào.
• Đối với đầu vào thứ hai, chúng tôi sử dụng email giá trị, xác định trường văn bản một dòng chỉ chấp nhận địa chỉ e-mail được hình thành tốt. Điều này biến một trường văn bản cơ bản thành một loại trường "thông minh" sẽ thực hiện một số kiểm tra xác thực trên dữ liệu do người dùng gõ. Nó cũng khiến bố cục bàn phím phù hợp hơn để nhập địa chỉ email (ví dụ: với ký hiệu @ theo mặc định) xuất hiện trên các thiết bị có bàn phím động, như điện thoại thông minh. Bạn sẽ tìm hiểu thêm về xác thực biểu mẫu trong bài viết xác thực biểu mẫu phía máy khách sau này.

Cuối cùng nhưng không kém phần quan trọng, lưu ý cú pháp của <input> so với

<li class="button">
  <button type="submit">Send your message</button>
</li>

<form action="/my-handling-form-page" method="post">
  <ul>
    <li>
      <label for="name">Name:</label>
      <input type="text" id="name" name="user_name" />
    </li>
    <li>
      <label for="mail">E-mail:</label>
      <input type="email" id="mail" name="user_email" />
    </li>
    <li>
      <label for="msg">Message:</label>
      <textarea id="msg" name="user_message"></textarea>
    </li>
  </ul>
</form>

<li class="button">
  <button type="submit">Send your message</button>
</li>

<input type="text" value="by default this element is filled with this text" />

Mặt khác, nếu bạn muốn xác định giá trị mặc định cho

<form action="/my-handling-form-page" method="post">
  <ul>
    <li>
      <label for="name">Name:</label>
      <input type="text" id="name" name="user_name" />
    </li>
    <li>
      <label for="mail">E-mail:</label>
      <input type="email" id="mail" name="user_email" />
    </li>
    <li>
      <label for="msg">Message:</label>
      <textarea id="msg" name="user_message"></textarea>
    </li>
  </ul>
</form>

<form action="/my-handling-form-page" method="post">
  <ul>
    <li>
      <label for="name">Name:</label>
      <input type="text" id="name" name="user_name" />
    </li>
    <li>
      <label for="mail">E-mail:</label>
      <input type="email" id="mail" name="user_email" />
    </li>
    <li>
      <label for="msg">Message:</label>
      <textarea id="msg" name="user_message"></textarea>
    </li>
  </ul>
</form>

<textarea>
by default this element is filled with this text
</textarea>

Phần tử <form action="/my-handling-form-page" method="post"> <ul> <li> <label for="name">Name:</label> <input type="text" id="name" name="user_name" /> </li> <li> <label for="mail">E-mail:</label> <input type="email" id="mail" name="user_email" /> </li> <li> <label for="msg">Message:</label> <textarea id="msg" name="user_message"></textarea> </li> </ul> </form> 4

Việc đánh dấu cho hình thức của chúng tôi gần như hoàn tất; Chúng tôi chỉ cần thêm một nút để cho phép người dùng gửi hoặc "gửi", dữ liệu của họ khi họ đã điền vào biểu mẫu. Điều này được thực hiện bằng cách sử dụng phần tử

<form action="/my-handling-form-page" method="post">
  <ul>
    <li>
      <label for="name">Name:</label>
      <input type="text" id="name" name="user_name" />
    </li>
    <li>
      <label for="mail">E-mail:</label>
      <input type="email" id="mail" name="user_email" />
    </li>
    <li>
      <label for="msg">Message:</label>
      <textarea id="msg" name="user_message"></textarea>
    </li>
  </ul>
</form>

<li class="button">
  <button type="submit">Send your message</button>
</li>

<li class="button">
  <button type="submit">Send your message</button>
</li>

Phần tử

<form action="/my-handling-form-page" method="post">
  <ul>
    <li>
      <label for="name">Name:</label>
      <input type="text" id="name" name="user_name" />
    </li>
    <li>
      <label for="mail">E-mail:</label>
      <input type="email" id="mail" name="user_email" />
    </li>
    <li>
      <label for="msg">Message:</label>
      <textarea id="msg" name="user_message"></textarea>
    </li>
  </ul>
</form>

<textarea>
by default this element is filled with this text
</textarea>

form {
  /* Center the form on the page */
  margin: 0 auto;
  width: 400px;
  /* Form outline */
  padding: 1em;
  border: 1px solid #ccc;
  border-radius: 1em;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

form li + li {
  margin-top: 1em;
}

label {
  /* Uniform size & alignment */
  display: inline-block;
  width: 90px;
  text-align: right;
}

input,
textarea {
  /* To make sure that all text fields have the same font settings
     By default, textareas have a monospace font */
  font: 1em sans-serif;

  /* Uniform text field size */
  width: 300px;
  box-sizing: border-box;

  /* Match form field borders */
  border: 1px solid #999;
}

input:focus,
textarea:focus {
  /* Additional highlight for focused elements */
  border-color: #000;
}

textarea {
  /* Align multiline text fields with their labels */
  vertical-align: top;

  /* Provide space to type some text */
  height: 5em;
}

.button {
  /* Align buttons with the text fields */
  padding-left: 90px; /* same size as the label elements */
}

button {
  /* This extra margin represent roughly the same space as the space
     between the labels and their text fields */
  margin-left: 0.5em;
}

form {
  /* Center the form on the page */
  margin: 0 auto;
  width: 400px;
  /* Form outline */
  padding: 1em;
  border: 1px solid #ccc;
  border-radius: 1em;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

form li + li {
  margin-top: 1em;
}

label {
  /* Uniform size & alignment */
  display: inline-block;
  width: 90px;
  text-align: right;
}

input,
textarea {
  /* To make sure that all text fields have the same font settings
     By default, textareas have a monospace font */
  font: 1em sans-serif;

  /* Uniform text field size */
  width: 300px;
  box-sizing: border-box;

  /* Match form field borders */
  border: 1px solid #999;
}

input:focus,
textarea:focus {
  /* Additional highlight for focused elements */
  border-color: #000;
}

textarea {
  /* Align multiline text fields with their labels */
  vertical-align: top;

  /* Provide space to type some text */
  height: 5em;
}

.button {
  /* Align buttons with the text fields */
  padding-left: 90px; /* same size as the label elements */
}

button {
  /* This extra margin represent roughly the same space as the space
     between the labels and their text fields */
  margin-left: 0.5em;
}

form {
  /* Center the form on the page */
  margin: 0 auto;
  width: 400px;
  /* Form outline */
  padding: 1em;
  border: 1px solid #ccc;
  border-radius: 1em;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

form li + li {
  margin-top: 1em;
}

label {
  /* Uniform size & alignment */
  display: inline-block;
  width: 90px;
  text-align: right;
}

input,
textarea {
  /* To make sure that all text fields have the same font settings
     By default, textareas have a monospace font */
  font: 1em sans-serif;

  /* Uniform text field size */
  width: 300px;
  box-sizing: border-box;

  /* Match form field borders */
  border: 1px solid #999;
}

input:focus,
textarea:focus {
  /* Additional highlight for focused elements */
  border-color: #000;
}

textarea {
  /* Align multiline text fields with their labels */
  vertical-align: top;

  /* Provide space to type some text */
  height: 5em;
}

.button {
  /* Align buttons with the text fields */
  padding-left: 90px; /* same size as the label elements */
}

button {
  /* This extra margin represent roughly the same space as the space
     between the labels and their text fields */
  margin-left: 0.5em;
}

• Nhấp vào nút

  form {
    /* Center the form on the page */
    margin: 0 auto;
    width: 400px;
    /* Form outline */
    padding: 1em;
    border: 1px solid #ccc;
    border-radius: 1em;
  }
  
  ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  
  form li + li {
    margin-top: 1em;
  }
  
  label {
    /* Uniform size & alignment */
    display: inline-block;
    width: 90px;
    text-align: right;
  }
  
  input,
  textarea {
    /* To make sure that all text fields have the same font settings
       By default, textareas have a monospace font */
    font: 1em sans-serif;
  
    /* Uniform text field size */
    width: 300px;
    box-sizing: border-box;
  
    /* Match form field borders */
    border: 1px solid #999;
  }
  
  input:focus,
  textarea:focus {
    /* Additional highlight for focused elements */
    border-color: #000;
  }
  
  textarea {
    /* Align multiline text fields with their labels */
    vertical-align: top;
  
    /* Provide space to type some text */
    height: 5em;
  }
  
  .button {
    /* Align buttons with the text fields */
    padding-left: 90px; /* same size as the label elements */
  }
  
  button {
    /* This extra margin represent roughly the same space as the space
       between the labels and their text fields */
    margin-left: 0.5em;
  }
  

  2 (giá trị mặc định) sẽ gửi dữ liệu của biểu mẫu đến trang web được xác định bởi thuộc tính

  <form action="/my-handling-form-page" method="post">
    <ul>
      <li>
        <label for="name">Name:</label>
        <input type="text" id="name" name="user_name" />
      </li>
      <li>
        <label for="mail">E-mail:</label>
        <input type="email" id="mail" name="user_email" />
      </li>
      <li>
        <label for="msg">Message:</label>
        <textarea id="msg" name="user_message"></textarea>
      </li>
    </ul>
  </form>
  

  9 của phần tử

  <form action="/my-handling-form-page" method="post">
    <ul>
      <li>
        <label for="name">Name:</label>
        <input type="text" id="name" name="user_name" />
      </li>
      <li>
        <label for="mail">E-mail:</label>
        <input type="email" id="mail" name="user_email" />
      </li>
      <li>
        <label for="msg">Message:</label>
        <textarea id="msg" name="user_message"></textarea>
      </li>
    </ul>
  </form>
  

  0.
• Nhấp vào nút

  form {
    /* Center the form on the page */
    margin: 0 auto;
    width: 400px;
    /* Form outline */
    padding: 1em;
    border: 1px solid #ccc;
    border-radius: 1em;
  }
  
  ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  
  form li + li {
    margin-top: 1em;
  }
  
  label {
    /* Uniform size & alignment */
    display: inline-block;
    width: 90px;
    text-align: right;
  }
  
  input,
  textarea {
    /* To make sure that all text fields have the same font settings
       By default, textareas have a monospace font */
    font: 1em sans-serif;
  
    /* Uniform text field size */
    width: 300px;
    box-sizing: border-box;
  
    /* Match form field borders */
    border: 1px solid #999;
  }
  
  input:focus,
  textarea:focus {
    /* Additional highlight for focused elements */
    border-color: #000;
  }
  
  textarea {
    /* Align multiline text fields with their labels */
    vertical-align: top;
  
    /* Provide space to type some text */
    height: 5em;
  }
  
  .button {
    /* Align buttons with the text fields */
    padding-left: 90px; /* same size as the label elements */
  }
  
  button {
    /* This extra margin represent roughly the same space as the space
       between the labels and their text fields */
    margin-left: 0.5em;
  }
  

  3 đặt lại tất cả các tiện ích biểu mẫu về giá trị mặc định của chúng ngay lập tức. Từ quan điểm của UX, đây được coi là thực hành xấu, vì vậy bạn nên tránh sử dụng loại nút này trừ khi bạn thực sự có lý do chính đáng để bao gồm một.
• Một cú nhấp chuột vào nút

  form {
    /* Center the form on the page */
    margin: 0 auto;
    width: 400px;
    /* Form outline */
    padding: 1em;
    border: 1px solid #ccc;
    border-radius: 1em;
  }
  
  ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  
  form li + li {
    margin-top: 1em;
  }
  
  label {
    /* Uniform size & alignment */
    display: inline-block;
    width: 90px;
    text-align: right;
  }
  
  input,
  textarea {
    /* To make sure that all text fields have the same font settings
       By default, textareas have a monospace font */
    font: 1em sans-serif;
  
    /* Uniform text field size */
    width: 300px;
    box-sizing: border-box;
  
    /* Match form field borders */
    border: 1px solid #999;
  }
  
  input:focus,
  textarea:focus {
    /* Additional highlight for focused elements */
    border-color: #000;
  }
  
  textarea {
    /* Align multiline text fields with their labels */
    vertical-align: top;
  
    /* Provide space to type some text */
    height: 5em;
  }
  
  .button {
    /* Align buttons with the text fields */
    padding-left: 90px; /* same size as the label elements */
  }
  
  button {
    /* This extra margin represent roughly the same space as the space
       between the labels and their text fields */
    margin-left: 0.5em;
  }
  

  4 không làm gì cả! Điều đó nghe có vẻ ngớ ngẩn, nhưng nó hữu ích đáng kinh ngạc để xây dựng các nút tùy chỉnh - bạn có thể xác định chức năng đã chọn của chúng với JavaScript.

Lưu ý: Bạn cũng có thể sử dụng phần tử <input> với

<textarea>
by default this element is filled with this text
</textarea>

<form action="/my-handling-form-page" method="post">
  <ul>
    <li>
      <label for="name">Name:</label>
      <input type="text" id="name" name="user_name" />
    </li>
    <li>
      <label for="mail">E-mail:</label>
      <input type="email" id="mail" name="user_email" />
    </li>
    <li>
      <label for="msg">Message:</label>
      <textarea id="msg" name="user_message"></textarea>
    </li>

    …
  </ul>
</form>

<form action="/my-handling-form-page" method="post">
  <ul>
    <li>
      <label for="name">Name:</label>
      <input type="text" id="name" name="user_name" />
    </li>
    <li>
      <label for="mail">E-mail:</label>
      <input type="email" id="mail" name="user_email" />
    </li>
    <li>
      <label for="msg">Message:</label>
      <textarea id="msg" name="user_message"></textarea>
    </li>
  </ul>
</form>

<form action="/my-handling-form-page" method="post">
  <ul>
    <li>
      <label for="name">Name:</label>
      <input type="text" id="name" name="user_name" />
    </li>
    <li>
      <label for="mail">E-mail:</label>
      <input type="email" id="mail" name="user_email" />
    </li>
    <li>
      <label for="msg">Message:</label>
      <textarea id="msg" name="user_message"></textarea>
    </li>
  </ul>
</form>

<textarea>
by default this element is filled with this text
</textarea>

<form action="/my-handling-form-page" method="post">
  <ul>
    <li>
      <label for="name">Name:</label>
      <input type="text" id="name" name="user_name" />
    </li>
    <li>
      <label for="mail">E-mail:</label>
      <input type="email" id="mail" name="user_email" />
    </li>
    <li>
      <label for="msg">Message:</label>
      <textarea id="msg" name="user_message"></textarea>
    </li>

    …
  </ul>
</form>

<form action="/my-handling-form-page" method="post">
  <ul>
    <li>
      <label for="name">Name:</label>
      <input type="text" id="name" name="user_name" />
    </li>
    <li>
      <label for="mail">E-mail:</label>
      <input type="email" id="mail" name="user_email" />
    </li>
    <li>
      <label for="msg">Message:</label>
      <textarea id="msg" name="user_message"></textarea>
    </li>
  </ul>
</form>

<form action="/my-handling-form-page" method="post">
  <ul>
    <li>
      <label for="name">Name:</label>
      <input type="text" id="name" name="user_name" />
    </li>
    <li>
      <label for="mail">E-mail:</label>
      <input type="email" id="mail" name="user_email" />
    </li>
    <li>
      <label for="msg">Message:</label>
      <textarea id="msg" name="user_message"></textarea>
    </li>
  </ul>
</form>

Kiểu dáng hình thức cơ bản

Bây giờ bạn đã hoàn thành việc viết mã HTML của biểu mẫu, hãy thử lưu nó và xem nó trong trình duyệt. Hiện tại, bạn sẽ thấy rằng nó trông khá xấu xí.

Lưu ý: Nếu bạn không nghĩ rằng bạn đã có mã HTML đúng, hãy thử so sánh nó với ví dụ đã hoàn thành của chúng tôi-xem First Form.html (cũng xem nó trực tiếp). If you don't think you've got the HTML code right, try comparing it with our finished example — see first-form.html (also see it live).

Các hình thức nổi tiếng là khó khăn để tạo phong cách độc đáo. Nó nằm ngoài phạm vi của bài viết này để dạy bạn tạo kiểu hình thành chi tiết, vì vậy hiện tại chúng tôi sẽ chỉ cho bạn thêm một số CSS để làm cho nó trông ổn.

Trước hết, thêm một phần tử

<form action="/my-handling-form-page" method="post">
  <ul>
    <li>
      <label for="name">Name:</label>
      <input type="text" id="name" name="user_name" />
    </li>
    <li>
      <label for="mail">E-mail:</label>
      <input type="email" id="mail" name="user_email" />
    </li>
    <li>
      <label for="msg">Message:</label>
      <textarea id="msg" name="user_message"></textarea>
    </li>

    …
  </ul>
</form>

Bên trong các thẻ

<form action="/my-handling-form-page" method="post">
  <ul>
    <li>
      <label for="name">Name:</label>
      <input type="text" id="name" name="user_name" />
    </li>
    <li>
      <label for="mail">E-mail:</label>
      <input type="email" id="mail" name="user_email" />
    </li>
    <li>
      <label for="msg">Message:</label>
      <textarea id="msg" name="user_message"></textarea>
    </li>

    …
  </ul>
</form>

form {
  /* Center the form on the page */
  margin: 0 auto;
  width: 400px;
  /* Form outline */
  padding: 1em;
  border: 1px solid #ccc;
  border-radius: 1em;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

form li + li {
  margin-top: 1em;
}

label {
  /* Uniform size & alignment */
  display: inline-block;
  width: 90px;
  text-align: right;
}

input,
textarea {
  /* To make sure that all text fields have the same font settings
     By default, textareas have a monospace font */
  font: 1em sans-serif;

  /* Uniform text field size */
  width: 300px;
  box-sizing: border-box;

  /* Match form field borders */
  border: 1px solid #999;
}

input:focus,
textarea:focus {
  /* Additional highlight for focused elements */
  border-color: #000;
}

textarea {
  /* Align multiline text fields with their labels */
  vertical-align: top;

  /* Provide space to type some text */
  height: 5em;
}

.button {
  /* Align buttons with the text fields */
  padding-left: 90px; /* same size as the label elements */
}

button {
  /* This extra margin represent roughly the same space as the space
     between the labels and their text fields */
  margin-left: 0.5em;
}

Lưu và tải lại, và bạn sẽ thấy rằng biểu mẫu của bạn sẽ trông ít xấu xí hơn nhiều.

Gửi dữ liệu biểu mẫu đến máy chủ web của bạn

Phần cuối cùng, và có lẽ là khó nhất, là xử lý dữ liệu biểu mẫu ở phía máy chủ. Phần tử

<form action="/my-handling-form-page" method="post">
  <ul>
    <li>
      <label for="name">Name:</label>
      <input type="text" id="name" name="user_name" />
    </li>
    <li>
      <label for="mail">E-mail:</label>
      <input type="email" id="mail" name="user_email" />
    </li>
    <li>
      <label for="msg">Message:</label>
      <textarea id="msg" name="user_message"></textarea>
    </li>
  </ul>
</form>

<form action="/my-handling-form-page" method="post">
  <ul>
    <li>
      <label for="name">Name:</label>
      <input type="text" id="name" name="user_name" />
    </li>
    <li>
      <label for="mail">E-mail:</label>
      <input type="email" id="mail" name="user_email" />
    </li>
    <li>
      <label for="msg">Message:</label>
      <textarea id="msg" name="user_message"></textarea>
    </li>
  </ul>
</form>

<input type="text" value="by default this element is filled with this text" />

Chúng tôi cung cấp một thuộc tính

<form action="/my-handling-form-page" method="post">
  <div>
    <label for="name">Name:</label>
    <input type="text" id="name" name="user_name" />
  </div>

  <div>
    <label for="mail">E-mail:</label>
    <input type="email" id="mail" name="user_email" />
  </div>

  <div>
    <label for="msg">Message:</label>
    <textarea id="msg" name="user_message"></textarea>
  </div>

  <div class="button">
    <button type="submit">Send your message</button>
  </div>
</form>

Để đặt tên cho dữ liệu trong một biểu mẫu, bạn cần sử dụng thuộc tính

<form action="/my-handling-form-page" method="post">
  <div>
    <label for="name">Name:</label>
    <input type="text" id="name" name="user_name" />
  </div>

  <div>
    <label for="mail">E-mail:</label>
    <input type="email" id="mail" name="user_email" />
  </div>

  <div>
    <label for="msg">Message:</label>
    <textarea id="msg" name="user_message"></textarea>
  </div>

  <div class="button">
    <button type="submit">Send your message</button>
  </div>
</form>

<form action="/my-handling-form-page" method="post">
  <ul>
    <li>
      <label for="name">Name:</label>
      <input type="text" id="name" name="user_name" />
    </li>
    <li>
      <label for="mail">E-mail:</label>
      <input type="email" id="mail" name="user_email" />
    </li>
    <li>
      <label for="msg">Message:</label>
      <textarea id="msg" name="user_message"></textarea>
    </li>

    …
  </ul>
</form>

Trong ví dụ của chúng tôi, biểu mẫu sẽ gửi 3 đoạn dữ liệu có tên "

<form action="/my-handling-form-page" method="post">
  <div>
    <label for="name">Name:</label>
    <input type="text" id="name" name="user_name" />
  </div>

  <div>
    <label for="mail">E-mail:</label>
    <input type="email" id="mail" name="user_email" />
  </div>

  <div>
    <label for="msg">Message:</label>
    <textarea id="msg" name="user_message"></textarea>
  </div>

  <div class="button">
    <button type="submit">Send your message</button>
  </div>
</form>

<form action="/my-handling-form-page" method="post">
  <div>
    <label for="name">Name:</label>
    <input type="text" id="name" name="user_name" />
  </div>

  <div>
    <label for="mail">E-mail:</label>
    <input type="email" id="mail" name="user_email" />
  </div>

  <div>
    <label for="msg">Message:</label>
    <textarea id="msg" name="user_message"></textarea>
  </div>

  <div class="button">
    <button type="submit">Send your message</button>
  </div>
</form>

<form action="/my-handling-form-page" method="post">
  <div>
    <label for="name">Name:</label>
    <input type="text" id="name" name="user_name" />
  </div>

  <div>
    <label for="mail">E-mail:</label>
    <input type="email" id="mail" name="user_email" />
  </div>

  <div>
    <label for="msg">Message:</label>
    <textarea id="msg" name="user_message"></textarea>
  </div>

  <div class="button">
    <button type="submit">Send your message</button>
  </div>
</form>

<form action="/my-handling-form-page" method="post">
  <div>
    <label for="name">Name:</label>
    <input type="text" id="name" name="user_name" />
  </div>

  <div>
    <label for="mail">E-mail:</label>
    <input type="email" id="mail" name="user_email" />
  </div>

  <div>
    <label for="msg">Message:</label>
    <textarea id="msg" name="user_message"></textarea>
  </div>

  <div class="button">
    <button type="submit">Send your message</button>
  </div>
</form>

<form action="/my-handling-form-page" method="post">
  <div>
    <label for="name">Name:</label>
    <input type="text" id="name" name="user_name" />
  </div>

  <div>
    <label for="mail">E-mail:</label>
    <input type="email" id="mail" name="user_email" />
  </div>

  <div>
    <label for="msg">Message:</label>
    <textarea id="msg" name="user_message"></textarea>
  </div>

  <div class="button">
    <button type="submit">Send your message</button>
  </div>
</form>

Ở phía máy chủ, tập lệnh tại URL "

<form action="/my-handling-form-page" method="post">
  <div>
    <label for="name">Name:</label>
    <input type="text" id="name" name="user_name" />
  </div>

  <div>
    <label for="mail">E-mail:</label>
    <input type="email" id="mail" name="user_email" />
  </div>

  <div>
    <label for="msg">Message:</label>
    <textarea id="msg" name="user_message"></textarea>
  </div>

  <div class="button">
    <button type="submit">Send your message</button>
  </div>
</form>

Bản tóm tắt

Xin chúc mừng, bạn đã xây dựng biểu mẫu web đầu tiên của mình. Nó trông giống như thế này trực tiếp:

<form action="/my-handling-form-page" method="post">
  <div>
    <label for="name">Name:</label>
    <input type="text" id="name" name="user_name" />
  </div>

  <div>
    <label for="mail">E-mail:</label>
    <input type="email" id="mail" name="user_email" />
  </div>

  <div>
    <label for="msg">Message:</label>
    <textarea id="msg" name="user_message"></textarea>
  </div>

  <div class="button">
    <button type="submit">Send your message</button>
  </div>
</form>

form {
  /* Just to center the form on the page */
  margin: 0 auto;
  width: 400px;

  /* To see the limits of the form */
  padding: 1em;
  border: 1px solid #ccc;
  border-radius: 1em;
}

div + div {
  margin-top: 1em;
}

label {
  /* To make sure that all label have the same size and are properly align */
  display: inline-block;
  width: 90px;
  text-align: right;
}

input,
textarea {
  /* To make sure that all text field have the same font settings
     By default, textarea are set with a monospace font */
  font: 1em sans-serif;

  /* To give the same size to all text field */
  width: 300px;

  -moz-box-sizing: border-box;
  box-sizing: border-box;

  /* To harmonize the look & feel of text field border */
  border: 1px solid #999;
}

input:focus,
textarea:focus {
  /* To give a little highlight on active elements */
  border-color: #000;
}

textarea {
  /* To properly align multiline text field with their label */
  vertical-align: top;

  /* To give enough room to type some text */
  height: 5em;

  /* To allow users to resize any textarea vertically
     It works only on Chrome, Firefox and Safari */
  resize: vertical;
}

.button {
  /* To position the buttons to the same position of the text fields */
  padding-left: 90px; /* same size as the label elements */
}

button {
  /* This extra margin represent the same space as the space between
     the labels and their text fields */
  margin-left: 0.5em;
}

Tuy nhiên, đó chỉ là khởi đầu - bây giờ là lúc để nhìn sâu hơn. Các biểu mẫu có nhiều sức mạnh hơn những gì chúng ta đã thấy ở đây và các bài viết khác trong mô -đun này sẽ giúp bạn làm chủ phần còn lại.

• Tổng quan: Hình thức
• Tiếp theo

Trong mô -đun này

Chủ đê nâng cao