1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
|
---
title: HTML forms
slug: Learn/Forms
tags:
- Beginner
- Featured
- Forms
- Guide
- HTML
- Landing
- Learn
- NeedsTranslation
- TopicStub
- Web
translation_of: Learn/Forms
original_slug: Learn/HTML/Forms
---
<div>{{LearnSidebar}}</div>
<p class="summary">This module provides a series of articles that will help you master HTML forms. HTML forms are a very powerful tool for interacting with users; however, for historical and technical reasons, it's not always obvious how to use them to their full potential. In this guide, we'll cover all aspects of HTML forms, from structure to styling, from data handling to custom widgets.</p>
<h2 id="Prerequisites">Prerequisites</h2>
<p>Before starting this module, you should at least work through our <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>. At this point you should find the {{anch("Basic guides")}} easy to understand, and also be able to make use of our <a href="/en-US/docs/Learn/HTML/Forms/The_native_form_widgets">Native form widgets</a> guide.</p>
<p>The rest of the module however is a bit more advanced — it is easy to put form widgets on a page, but you can't actually do much with them without using some advanced form features, CSS, and JavaScript. Therefore, before you look at the other sections we'd recommend that you go away and learn some <a href="/en-US/docs/Learn/CSS">CSS</a> and <a href="/en-US/docs/Learn/JavaScript">JavaScript</a> first.</p>
<p>The above text is a good indicator as to why we've put web forms into its own standalone module, rather than trying to mix bits of it into the HTML, CSS, and JavaScript topic areas — form elements are more complex than most other HTML elements, and they also require a close marriage of related CSS and JavaScript techniques to get the most out of them.</p>
<div class="note">
<p><strong>Note</strong>: If you are working on a computer/tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as <a href="http://jsbin.com/">JSBin</a> or <a href="https://thimble.mozilla.org/">Thimble</a>.</p>
</div>
<h2 id="Hướng_dẫn_mở_đầu">Hướng dẫn mở đầu</h2>
<dl>
<dt><a href="/en-US/docs/Learn/HTML/Forms/Your_first_HTML_form">Your first HTML form</a></dt>
<dd>The first article in our series provides your very first experience of creating an HTML form, including designing a simple form, implementing it using the right HTML elements, adding some very simple styling via CSS, and how data is sent to a server.</dd>
<dt><a href="/en-US/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form">How to structure an HTML form</a></dt>
<dd>With the basics out of the way, we now look in more detail at the elements used to provide structure and meaning to the different parts of a form.</dd>
</dl>
<h2 id="Các_form_controls_khác_nhau">Các form controls khác nhau</h2>
<p><strong><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Forms/Basic_native_form_controls">Basic native form controls</a></strong><br>
Chúng ta bắt đầu phần này bằng việc nhìn vào chức năng khả dụng của của kiểu {{htmlelement("input")}} HTML, tìm hiểu những tùy chọn có thể sử dụng để thu thập các kiểu data khác nhau.</p>
<p><strong><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Forms/HTML5_input_types">The HTML5 input types</a></strong><br>
Tại đây chúng ta sẽ tiếp tục đi sâu vào phần tử <code><input></code>, tìm hiểu về các kiểu input mới được thêm trong HTML5, và các loại UI controls khác nhau và cách thu thập dữ liệu nâng cao mà chúng làm được. Thêm nữa, chúng ta sẽ xem qua phần tử {{htmlelement('output')}}.</p>
<p><strong><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Forms/Other_form_controls">Other form controls</a></strong><br>
Tiếp sau đó chúng ta sẽ tìm hiểu về các non-<code><input></code> form controls và các công cụ có liên quan, ví dụ {{htmlelement('select')}}, {{htmlelement('textarea')}}, {{htmlelement('meter')}}, and {{htmlelement('progress')}}.</p>
<h2 id="Form_styling_guides">Form styling guides</h2>
<dl>
<dt></dt>
<dt><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Forms/Styling_web_forms">Styling web forms</a></dt>
<dd>This article provides an introduction to styling forms with CSS, including all the basics you might need to know for basic styling tasks.</dd>
<dt><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Forms/Advanced_form_styling">Advanced form styling</a></dt>
<dd>Here we look at some more advanced form styling techniques that need to be used when trying to deal with some of the more difficult-to-style form elements.</dd>
<dt><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Forms/UI_pseudo-classes">UI pseudo-classes</a></dt>
<dd>An introduction to the UI pseudo-classes enabling HTML form controls to be targeted based on their current state.</dd>
</dl>
<h2 id="Kiểm_tra_và_gửi_dữ_liệu_form">Kiểm tra và gửi dữ liệu form</h2>
<dl>
<dt><a href="/en-US/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data">Sending form data</a></dt>
<dd>Bài viết này cho biết điều gì sẽ xảy ra khi user submit một cái form - dữ liệu sẽ đi đâu, và làm sao chúng ta có thẻ xử lý dữ liệu đó khi nó đi đến đó? Chúng ta cũng nhìn vào một số vấn đề về bảo mật liên quan đến việc gửi dữ liệu đi.</dd>
<dt><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation">Client-side form validation</a></dt>
<dd>Gửi dữ liệu đi thôi là chưa đủ - chúng ta cũng cần phải đảm bảo rằng dữ liêu mà user điền vào form là đúng định dạng chúng ta mong muốn để xử lý được, và chúng sẽ không làm hư hại ứng dụng của chúng ta. We also want to help our users to fill out our forms correctly and don't get frustrated when trying to use our apps. Form validation helps us achieve these goals — this article tells you what you need to know.</dd>
</dl>
<h2 id="Advanced_guides">Advanced guides</h2>
<dl>
<dt><a href="/en-US/docs/Learn/HTML/Forms/How_to_build_custom_form_widgets">Làm sao để xây dựng các form widgets tùy chỉnh</a> </dt>
<dd>Bạn sẽ bắt gặp các trường hợp mà form tích hợp trong cùng file là không đủ đáp ứng nhu cầu của bạn, ví dụ lý do về styling hay chức năng. Trong các trường hợp này, bạn có thể sẽ cần xây dựng widget form của riêng bạn dựa trên HTML thô. Bài viết này sẽ giải thích làm cách nào đạt được điều đó, và các điều cần cân nhắc khi bạn làm nó, với một case study thực tế.</dd>
<dt><a href="/en-US/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript">Gửi form bằng JavaScript</a></dt>
<dd>This article looks at ways to use a form to assemble an HTTP request and send it via custom JavaScript, rather than standard form submission. It also looks at why you'd want to do this, and the implications of doing so. (See also Using FormData objects.)</dd>
<dt><a href="/en-US/docs/Learn/HTML/Forms/HTML_forms_in_legacy_browsers">HTML forms in legacy browsers</a></dt>
<dd>Article covering feature detection, etc. This should be redirected to the cross browser testing module, as the same stuff is covered better there.</dd>
</dl>
<h2 id="Form_styling_guides_2">Form styling guides</h2>
<dl>
<dt><a href="/en-US/docs/Learn/HTML/Forms/Styling_HTML_forms">Styling HTML forms</a></dt>
<dd>This article provides an introduction to styling forms with CSS, including all the basics you might need to know for basic styling tasks.</dd>
<dt><a href="/en-US/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms">Advanced styling for HTML forms</a></dt>
<dd>Here we look at some more advanced form styling techniques that need to be used when trying to deal with some of the more difficult-to-style elements.</dd>
<dt><a href="/en-US/docs/Learn/HTML/Forms/Property_compatibility_table_for_form_widgets">Property compatibility table for form widgets</a></dt>
<dd>This last article provides a handy reference allowing you to look up what CSS properties are compatible with what form elements.</dd>
</dl>
<h2 id="See_also">See also</h2>
<ul>
<li><a href="/en-US/docs/Web/HTML/Element#Forms">HTML forms element reference</a></li>
<li><a href="/en-US/docs/Web/HTML/Element/input">HTML <input> types reference</a></li>
</ul>
|
