Form label
The login and registration functions that we often use on the website are written in a form, as shown in the following figure:
In general, a form consists of three parts:
① Form field: The form field is equivalent to a control, which is used to hold the entire form part. If there is no form field, the data in the form cannot interact with the background server.
② Form controls: Controls refer to various functional items of the form, such as text input boxes, password input boxes, check boxes, submit buttons, reset buttons, etc.
③ Prompt information: refers to some prompt text descriptions, which are convenient for users to use.
For the form in the figure above, we divide it into 3 parts, as shown in the figure below:
Let's look at some commonly used form controls.
The input control is represented
by a <input />label. It is a single label. The input label has many attributes, as shown in the figure below:
The most important one is the type attribute, which is used to specify different control types. Let's take a look at them one by one. There are comments in the code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单input 控件演示</title>
</head>
<!-- type=text 这是一个文本框
size 属性是文本框的长度
value 是文本框中的默认值 -->
用户名：<input type="text" size="20" value="abc" /> <br /> <br />
<!-- type=password 这是一个密码框
maxlength 是文本框中能输入的字符的最大长度-->
密 码：<input type="password" size="21" value="123" maxlength="6" /> <br /> <br />
<!-- input 控件的下面这种写法实际上两组控件，
这种情况下男女两个选框可以同时选择，这一般不是我们想要的效果 -->
性别1：<input type="radio" /> 男
<input type="radio" /> 女 <br /> <br />
<!-- 为了使得男女两个选框只能选择其中一个，我们需要将这两个input 控件变成一组控件，可以使用name 属性。
如下面这种写法，下面的两个input 控件的name 属性的值都是 sex，
这时这两个控件就是同一组控件，男女两个选框就只能选择一个 -->
性别2：<input type="radio" name="sex" checked /> 男 <!-- checked 属性表示默认选中的组件，这里默认选中“男” -->
<input type="radio" name="sex" /> 女 <br /> <br />
<!-- type=checkbox 是复选框，可以同时选择多个 -->
爱 好：<input type="checkbox" name="hobby"> 电影
<input type="checkbox" name="hobby"> 唱歌
<input type="checkbox" name="hobby"> 踢球 <br /> <br />
<!-- type=button 是一个搜索按钮，可以用鼠标点击
value 是按钮上显示的文字-->
这是一个搜索按钮：<input type="button" value="我是搜索按钮" /> <br /> <br />
<!-- type=submit 是一个提交按钮，可以用鼠标点击 -->
这是一个提交按钮：<input type="submit" value="我是提交按钮" /> <br /> <br />
<!-- type=reset 是一个重置按钮，可以用鼠标点击 -->
这是一个重置按钮：<input type="reset" value="我是重置按钮" /> <br /> <br />
<!-- type=image 是一个图片按钮，可以用鼠标点击，用src 属性设置图片的地址 -->
这是一个图片按钮：<input type="image" src="https://www.baidu.com/img/baidu_jgylogo3.gif" /> <br /> <br />
<!-- type=file 用于上传文件 -->
这个用于上传文件：<input type="file" /> <br />
</body>
</html>
The following pictures correspond to the code and the effect, which looks more convenient:
label label
label label is usually used in conjunction with the input label, it can play a role, when you click on the text next to an input box, you can also click input Like the box, lock the input box. The following is an example to illustrate:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>lable 标签演示</title>
</head>
<!-- 用label 标签将文字说明和input 标签都包住，这时，
当点击“用户名” 三个字时也就相当于点击了input 框 -->
<label>
用户名：<input type="text" />
</label>
<br />
<!-- 可以通过label 标签中的for 属性，与input 标签中的id 属性配合使用，
来将label 标签与 input 标签绑定起来，下面代码的效果与上面的效果是一样的 -->
<label for="aname">
用户名：<input type="text" id="aname" />
</label>
</body>
</html>
The effect is as follows:
textarea control
textarea control is a text field, as shown in the figure below, you can enter multiple lines of text:
Let's briefly demonstrate through the code below:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>textarea 标签演示</title>
</head>
<body>
这是一个留言板：
<textarea>输入留言</textarea>
</body>
</html>
The effect is as follows
Drop-down menu The
drop-down menu is <select></select>represented by a label, and its syntax format is as follows:
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
...
</select>
下面通过代码举例说明：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>下拉菜单演示</title>
</head>
<body>
你在北京哪个区：
<select>
<option>选择所在北京的区</option>
<option>海淀区</option>
<option>朝阳区</option>
<option selected>昌平区</option> <!-- 可以通过select 属性来选择默认的显示 -->
<option>大兴区</option>
<option>通州区</option>
</select>
</body>
</html>
The effect is as follows:
Form field The
form field is represented by the form tag, which controls the scope of a form. Each form should be placed in the form field. The form tags wrapped in the form tag can be submitted to the background. All the form tags we talked about above can be placed in the form tag and submitted to the backend server.
The syntax format of the form tag is as follows:
<body>
<form action="url地址" method="提交方式" name="表单名称">
各种表单控件
</form>
</body>
The commonly used attributes of the form tag are action, method, and name attributes, which are described in sequence below:
① action: used to specify the URL address to which the form information is submitted.
② method: used to specify the method of submitting form data, there are two types of get and post.
③ name: Used to specify the name of the form to distinguish different forms on the same page.