Basic knowledge of HTML forms
Click me into the group to learn and communicate together! (There are many learning materials in the group. I uploaded some of the webpages I have made in the group. Just download the ones that are needed)
QQ group: 722384575The actual form, we go to the bank to fill in the credit card form, the form on the web page is displayed
Why do you need
a form? The purpose of using a form is to collect user information.
In our webpage, we also need to interact with users and collect user information, at this time we need forms.
Form tags
In HTML, a complete form usually consists of three parts: form fields, form controls (also called form elements) and prompt information.
Form field A
form field is an area that contains form elements.
In HTML tags, <form>tags are used to define form fields to realize the collection and transmission of user information. <form>It will submit the form element information within its scope to the server.
<form action=“url地址” method=“提交方式” name=“表单域名称">
各种表单元素控件
</form>
Form controls (form elements)
can define various form elements in the form field. These form elements are content controls that allow users to input or select in the form.
Next, we explain:
1, input input form elements
2, select the drop-down form elements
3, textarea text field elements
in English words, input is the input means, and in the form element <input>tags used to collect user information.
In the <input>label, comprising a type attribute, depending on the value of the type attribute has a wide variety of forms input field (which may be text fields, check boxes, text control after the mask, radio buttons, buttons, etc.).
<input type="属性值" />
<input />The label
sets different attribute values for the single label type attribute to specify different control types . The attribute value of the type attribute of the
<input>form element
and its description are as follows:
In addition to the type attribute, the <input>label has many other attributes. The common attributes are as follows:
1. name And value are the attribute values of each form element, which are mainly used by back-end personnel.
2. name is the name of the form element, requiring radio buttons and check boxes to have the same name value.
3. The checked attribute is mainly for single Buttons and checkboxes are mainly used to select a form element by default as soon as the page is opened.
4. maxlength is the maximum number of characters that the user can enter in the form element, which is generally less used.
<input>Form element
1. Some form elements What if I want to display several texts by default when I open the page?
Answer: You can set the value attribute = "value" for these form elements
用户名: <input type="text" value="请输入用户名" />
2. There are many form elements on the page. How to distinguish between different form elements?
Answer: name attribute: the name of the current input form, which can be found in the background through the name attribute. There are many forms on the page, and the main function of name is to distinguish different forms.
用户名: <input type="text" value="请输入用户名" name="username" />
The value behind the name attribute is a custom
radio (or checkbox). If it is a group, we must give them the same name
<input type="radio" name="sex" />男
<input type="radio" name="sex" />女
3. What if a certain radio button or check box is selected as soon as the page is opened?
Answer: checked attribute: indicates the default selected state. Used for radio buttons and check buttons.
性 别:
<input type="radio" name="sex" value="男" checked="checked" />男
<input type="radio" name="sex" value="女" />女
4. How to make input form elements display different forms? For example, radio buttons or text boxes
<input type="radio" name="sex" value="男" checked="checked" />男
<input type="text" value=“请输入用户名”>
<label>Label The
<label> label defines the label (label) for the input element.
<label>The label is used to bind a form element. When
<label for="sex">男</label>
<input type="radio" name="sex" id="sex" />
核心： <label> 标签的 for 属性应当与相关元素的 id 属性相同。
<select>Form element
Usage scenario: In the page, if there are multiple options for the user to choose, and we want to save page space, we can use the <select>label control to define a drop-down list.
<select>Form element
syntax:
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
...
</select>
1. <select> 中至少包含一对<option> 。
2. 在<option> 中定义 selected =“ selected " 时，当前项即为默认选中项。
<textarea>Form element
syntax:
<textarea rows="3" cols="20">
文本内容
</textarea>
1, by <textarea>can easily create multi-line text input box label.
2. cols="the number of characters in each line", rows="the number of rows displayed", we will not use it in actual development, we use CSS to change the size.
Usage scenario: When the user enters a lot of content, we can't use the text box form, at this time we can use the < textarea>tag. In form elements, <textarea>labels are controls used to define multi-line text input. Use the multi-line text input control to enter more text. This control is common in message boards and comments.
Several summary points
of form elements 1. Form elements We learned three major groups of input input form elements select drop-down form elements textarea text field form elements.
2. These three groups of form elements should all be contained in the form field and have a name attribute .
<form>
<input type=“text" name=“username”>
<select name=“jiguan”>
<option>北京</option>
</select>
<textarea name= "message"></textarea>
</form>
Several summary points of form elements
There are three tags with very similar names:
(1) Form field form usage scenario: Submit the form element in the area to the backend server
(2) File field file is the input type attribute value Usage scenario: Upload file
(3) Textarea textarea usage scenarios: You can enter multiple lines of text, such as message board website introduction, etc...
4. We do not need to submit form elements at this stage, so we are only responsible for the appearance of form elements. It is very important to
consult documents
frequently . Good study habits.
Recommended URL:
MDN
W3cshool