Form label
The purpose of using forms is to collect user information.
A complete form usually consists of three parts: form fields , form controls (also called form elements) and prompt information .
1. 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 and
<form>submit the form element information within its scope to the server
Common attributes are as follows
| Attributes | Attribute value | effect |
|---|---|---|
| action | url address | Used to specify the URL address of the server program that receives and processes form data |
| method | get/post | Used to set the submission method of form data, the value is individual or post |
| name | name | Used to specify the name of the form to distinguish multiple form fields on the same page |
E.g:
<form action="url地址" method="提交方式" name="表单名称">
各种表单元素控件
</form>
2.
There are three form controls
(1): input input form element single label
(2): select drop-down form element
(3): textarea text field element
(1): input input form element
In the <input>label, it contains a type attribute. According to different type attribute values, the input field has many forms (it can be text
field, check box, text control after mask, single selection Buttons, buttons, etc.)
Syntax format:
<input type="属性值" />
The attribute value of the type attribute and its description are as follows
| Attribute value | description |
|---|---|
| button | Define clickable buttons |
| checkbox | Define checkbox |
| file | Define input fields and "browse" button for file upload |
| hidden | Define hidden input fields |
| image | Define the submit button in the form of an image |
| password | Define the password field. The characters in this field are masked |
| radio | Define radio buttons |
| reset | Define the reset button. The reset button will clear all data in the form |
| submit | Define the submit button. The submit button will send the form data to the server |
| text | Define a single-line input field in which the user can enter text. The default width is 20 characters |
In addition to the type attribute, the <input>tag has many other attributes, the commonly used ones are as follows
| Attributes | Attribute value | description |
|---|---|---|
| name | User-defined | Define the name of the input element |
| value | User-defined | Specifies the value of the input element |
| checked | checked | Specifies that this input element should be selected when it is first loaded |
| maxlength | Positive integer | Specifies the maximum length of characters in the input field |
Use example:
<form>
用户名：<input type="text" name="username" value="input"/> <br>
密码： <input type="password" name="pwd"/> <br>
<!--radio 单选按钮，可以实现多选以-->
<!--name是表单元素名字，这里性别 单选按钮必须有相同的name 才可以实现多选一-->
性别：男<input type="radio" name="sex"/> 女<input type="radio" name="sex"/><br>
<!--checkbox 复选框 可以时现多选-->
爱好： 吃饭<input type="checkbox" name="hobby"/>
睡觉<input type="checkbox" name="hobby" />
打豆豆<input type="checkbox" name="hobby" /> <br>
</form>
Note:
A: name and value are the attribute values of each form element.
B: name is the name of the form element for back-end personnel . Radio buttons and check boxes must have the same name value.
C: checked attribute is mainly used For radio buttons and check boxes , this button is selected by default when the page is opened.
D: maxlength is the maximum number of characters that the user can enter in the form element , generally less used
<label>The tag
<label>tag defines the tag
<label>tag for the input element to bind a form element. When <label>the text in the tag is clicked, the browser will automatically turn the cursor to or select the corresponding form element to increase the user experience
Syntax format:
<label for="sex">男</label> <input type="radio" name="sex" id="sex" />
Core: <label>The for attribute of the tag should be the same as the id attribute of the related element
(2): <select>Form elements
Usage scenario: In the page, if there are multiple options for users to choose, and you want to save page space, you can use tags to define drop-down lists
Basic syntax:
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
</select>
Note:
(1) <select>contains at least one pair <option>
(2) when <option>defined in selected="selected", the current item is the default selected item
E.g:
地址：
</form>
<select>
<option>北京</option>
<option>上海</option>
<option>广州</option>
<option>深圳</option>
</select>
</form>
(3): <textarea>Form elements
be used: when the user input content more can not use a text box form, this time using <textarea>the label
in the form element, <textarea>the tag is used to define a multi-line text input, the input can be more More text. Often used in message boards, comments
Basic syntax:
<textarea rows="3" cols="20">
文本内容
</textarea>
Explanation: cols="the number of characters in each row" rows="the number of rows displayed" (not commonly used in actual development, all use CSS to change the size)