- Written in front: refer to the tutorial of Bilibili dark horse programmer pink teacher
- Address: https://www.bilibili.com/video/BV14J4114768?t=328&p=26
table of Contents
Difference between text box and text field
Form label (master)
- In HTML, a complete form usually consists of three parts: form controls (also called form elements), prompt information, and form fields .
Form control Contains specific form function items, such as single-line text input box, password input box, check box, submit button, reset button, etc. Prompt information A form usually needs to contain some descriptive text to prompt the user to fill in and operate. Form field It is equivalent to a container, used to hold all the form controls and prompt information. You can define the url address of the program used to process the form data and the method of submitting the data to the server. If the form fields are not defined, the data in the form cannot be transmitted to the background server.
input control (emphasis)
<input type="属性值" value="你好">
- input
- The <input /> tag is a single tag
- The type attribute sets different attribute values to specify different control types
- In addition to the type attribute, there are other attributes
Common attributes:
type attribute
- This attribute can determine which input form you belong to by changing its value.
- For example, type ='text' means that the text box can be used as user name, nickname, etc.
- For example, type ='password' means that the content entered by the user in the password box is invisible.
用户名: <input type="text" /> 密 码：<input type="password" />
value attribute value
用户名:<input type="text" name="username" value="请输入用户名">
- value The default text value. Some forms want to display several texts by default as soon as the page is opened, which can be set by this value.
name attribute
用户名:<input type="text" name=“username” />
- name The name of the form, so that the backend can find this form through the name attribute .
- There are many forms on the page, and the main function of name is to distinguish different forms.
- The value behind the name attribute is defined by ourselves.
- If the radio is a group, we must give them the same name name so we can select one of them
<input type="radio" name="sex" />男 <input type="radio" name="sex" />女
- The name attribute, we use less now, but when we learn ajax and backend, it is a must.
checked attribute
- Indicates the default selected state. More common in radio buttons and check buttons.
性 别: <input type="radio" name="sex" value="男" checked="checked" />男 <input type="radio" name="sex" value="女" />女
- The above one means that the male radio button is selected by default
Input attribute summary
| Attributes | Description | effect |
|---|---|---|
| type | Form type | Used to specify different control types |
| value | Form value | The text displayed by default in the form |
| name | Form name | There are many forms on the page, and the main function of name is to distinguish different forms. |
| checked | Selected by default | Indicates that the radio or check button was selected at the beginning |
label (understand)
- aims:
- The main purpose of label is to improve user experience. Improve the best service for users.
- concept:
- The label tag defines the label (label) for the input element.
- effect:
- Used to bind a form element. When the label is clicked, the bound form element will get the input focus.
- How to bind elements?
The first usage is to directly include the input form with label .
<label> 用户名： <input type="radio" name="usename" value="请输入用户名"> </label>
- Suitable for single form selection
- The second usage for attribute specifies which form element the label is bound to
<label for="sex">男</label> <input type="radio" name="sex" id="sex">
- When we click on the text in the label, the cursor will be positioned in the specified form
textarea control (text field)
- grammar:
<textarea > 文本内容 </textarea>
- effect:
- You can easily create a multi-line text input box through the textarea control.
- cols="the number of characters in each row" rows="the number of rows displayed" We do not actually develop
Difference between text box and text field
Form name the difference Default value display For scene input type="text" Text box Can only display one line of text Single label, display the default value by value Username, nickname, password, etc. textarea Text field Can display multiple lines of text Double label, the default value is written in the middle of the label message board
select drop-down list
- purpose:
- If there are multiple options for the user to choose, in order to save space, we can use the select control to define a drop-down list.
- grammar:
<select> <option>选项1</option> <option>选项2</option> <option>选项3</option> ... </select>
- note:
- <select> contains at least a pair of option
- When you define selected = "selected " in option , the current item is the default selected item .
- But we will use less in actual development
form field
- How to transfer the collected user information to the server?
- Via form field
- purpose:
- In HTML, the form tag is used to define form fields to collect and transmit user information. All the content in the form will be submitted to the server.
- grammar:
<form action="url地址" method="提交方式" name="表单名称"> 各种表单控件 </form>
- Common attributes
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 the form data, the value is get or post. name name Used to specify the name of the form to distinguish multiple forms on the same page.
- note:
- Each form should have its own form field. When we make the page now, we can't see the effect if we don't write it, but if we learn ajax background interaction later, we must need the form field.
Element attributes
- Element attribute values use double quote syntax
- The element attribute value can be written on it
- recommend:
<input type="text" /> <input type="radio" name="name" checked="checked" />
- Not recommended:
<input type=text /> <input type='text' /> <input type="radio" name="name" checked />
Comprehensive case (registration page)
- Code:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>世纪佳缘-你在我也在</title> </head> <body> <table width="600" align="center"> <caption> <h4> 青春不常在，抓紧谈恋爱 </h4></caption> <!-- 1 --> <tr> <td>性别</td> <td> <input type="radio" name="sex" checked="checked" /><img src="images/man.jpg" /> 男 <input type="radio" name="sex" /><img src="images/women.jpg" /> 女 </td> </tr> <!-- 2 --> <tr> <td>生日</td> <td> <!-- 年份的 --> <select> <option>--请选择年--</option> <option>1995</option> <option>1996</option> <option>1997</option> <option>1998</option> </select> <!-- 月份的 --> <select> <option>--请选择月--</option> <option>1</option> <option>2</option> <option>3</option> <option>4</option> </select> <!-- 日子 --> <select> <option>--请选择日--</option> <option>1</option> <option>2</option> <option>3</option> <option>4</option> </select> </td> </tr> <!-- 3 --> <tr> <td>所在地区</td> <td> <input type="text" value="北京思密达" /> </td> </tr> <!-- 4行 --> <tr> <td>婚姻状况</td> <td> <input type="radio" name="marry" checked="checked"/> 未婚 <input type="radio" name="marry" /> 已婚 <input type="radio" name="marry" /> 离婚 </td> </tr> <!-- 5行 --> <tr> <td>学历</td> <td> <input type="text" value="幼儿园"> </td> </tr> <!-- 6行 --> <tr> <td>月薪</td> <td> <input type="text" value="10000-20000"> </td> </tr> <!-- 7行 --> <tr> <td>手机号码</td> <td> <input type="text"> </td> </tr> <!-- 8行 --> <tr> <td>昵称</td> <td> <input type="text" > </td> </tr> <!-- 9行 --> <tr> <td>喜欢的类型</td> <td> <input type="checkbox" name="love" /> 妩媚的 <input type="checkbox" name="love" /> 可爱的 <input type="checkbox" name="love" /> 小鲜肉 <input type="checkbox" name="love" /> 老腊肉 <input type="checkbox" name="love" /> 都喜欢 </td> </tr> <!-- 10 行 --> <tr> <td>自我介绍</td> <td> <textarea> 自我介绍 </textarea> </td> </tr> <!-- 11行 --> <tr> <td></td> <td> <input type="image" src="images/btn.png" /> </td> </tr> <!-- 12 行 --> <tr> <td></td> <td> <input type="checkbox" name="agree" checked="checked" />我同意注册条款和会员加入标准</td> </tr> <!-- 13行 --> <tr> <td></td> <td> <a href="#">我是会员，立即登录</a> </td> </tr> <!-- 14 --> <tr> <td></td> <td> <h3>我承诺</h3> <ul> <li>年满18岁、单身</li> <li>抱着严肃的态度</li> <li>真诚寻找另一半</li> </ul> </td> </tr> </table> </body> </html>
