- w3cschool rookie tutorial. CHM (Tencent Weiyun): https://share.weiyun.com/c1FaX6ZD
table of Contents
HTML tag_form tag_form item input1
HTML tag_form tag_form item input2
HTML tag_form tag_form item select
Section 3 Form Label
Today's content
- HTML tags: form tags
- CSS
HTML tags_form tags_overview
* Form:
* Concept: Used to collect data entered by the user (used to interact with the server).
* form: used to define the form. A range can be defined, and the range represents the range of collecting user data.
* Attributes:
* action: specify the URL of the submitted data
* method: specify the submission method
* classification: a total of 7 types, 2 are more commonly used
* get:
1. The request parameters will be displayed in the address bar. Will be encapsulated in the request line (explained after HTTP protocol).
2. The request parameter size is limited.
3. Not very safe.
* post:
2. The request parameters will not be displayed in the address bar. Will be encapsulated in the request body (explained after the HTTP protocol).
2. There is no limit to the size of request parameters.
3. Relatively safe.* To submit the data in the form item: its name attribute must be specified.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单标签</title>
</head>
<body>
<form action="#" method="post">
用户名：<input type="text" name="username"><br>
密码：<input name="password"><br>
<input type="submit" value="登录">
</form>
</body>
</html>HTML tag_form tag_form item input1
radio
checkbox
label
HTML tag_form tag_form item input2
* Form item label:
* input: you can change the style of element display through the type attribute value
* type attribute:
* text: text input box, default value
* placeholder: specify the prompt information of the input box, when the content of the input box changes, The prompt information will be cleared automatically
* password: password input box
* radio: single selection box
* Note:
1. If you want multiple radio buttons to achieve the effect of single selection, the name attribute value of multiple radio buttons must be the same.
2. Generally, each radio button will be provided with a value attribute, specifying the value submitted after it is selected
3. The checked attribute, you can specify the default value
* checkbox: checkbox
* Note:
1. Generally, each radio button will be given Provide the value attribute to specify the value submitted after it is selected.
2. The checked attribute, you can specify the default value.* file: file selection box
* hidden: hidden domain, used to submit some information.
* Button:
* submit: submit button, you can submit the form
* button: normal button
* image: image submit button
* src attribute specifies the path of the image* label: Specify the text description information of the input item
* Note:
* The for attribute of label generally corresponds to the id attribute value of input. If it corresponds, click on the label area to make the input box get focus.
Hidden domain
Color picker
HTML tag_form tag_form item select
* select: drop-down list
* sub-element: option, specify the list item
* textarea: text field
* cols: specify the number of columns, how many characters there are in each row
* rows: the default number of rows.
Summary of form code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单标签</title>
</head>
<body>
<form action="#" method="get">
<label for="username"> 用户名 </label>：<input type="text" name="username" placeholder="请输入用户名" id="username"><br>
密码：<input type="password" name="password" placeholder="请输入密码"><br>
性别：<input type="radio" name="gender" value="male"> 男
<input type="radio" name="gender" value="female" checked> 女
<br>
爱好：<input type="checkbox" name="hobby" value="shopping"> 逛街
<input type="checkbox" name="hobby" value="java" checked> Java
<input type="checkbox" name="hobby" value="game"> 游戏<br>
图片：<input type="file" name="file"><br>
隐藏域：<input type="hidden" name="id" value="aaa"> <br>
取色器：<input type="color" name="color"><br>
生日：<input type="date" name="birthday"> <br>
生日：<input type="datetime-local" name="birthday"> <br>
邮箱：<input type="email" name="email"> <br>
年龄：<input type="number" name="age"> <br>
省份：<select name="province">
<option value="">--请选择--</option>
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3" selected>陕西</option>
</select><br>
自我描述：
<textarea cols="20" rows="5" name="des"></textarea>
<br>
<input type="submit" value="登录">
<input type="button" value="一个按钮"><br>
<input type="image" src="img/regbtn.jpg">
</form>
</body>
</html>HTML tag_case 1_register page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册页面</title>
</head>
<body>
<!--定义表单 form-->
<form action="#" method="post">
<table border="1" align="center" width="500">
<tr>
<td><label for="username">用户名</label></td>
<td><input type="text" name="username" id="username"></td>
</tr>
<tr>
<td><label for="password">密码</label></td>
<td><input type="password" name="password" id="password"></td>
</tr>
<tr>
<td><label for="email">Email</label></td>
<td><input type="email" name="email" id="email"></td>
</tr>
<tr>
<td><label for="name">姓名</label></td>
<td><input type="text" name="name" id="name"></td>
</tr>
<tr>
<td><label for="tel">手机号</label></td>
<td><input type="text" name="tel" id="tel"></td>
</tr>
<tr>
<td><label>性别</label></td>
<td><input type="radio" name="gender" value="male"> 男
<input type="radio" name="gender" value="female"> 女
</td>
</tr>
<tr>
<td><label for="birthday">出生日期</label></td>
<td><input type="date" name="birthday" id="birthday"></td>
</tr>
<tr>
<td><label for="checkcode">验证码</label></td>
<td><input type="text" name="checkcode" id="checkcode">
<img src="img/verify_code.jpg">
</td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" value="注册"></td>
</tr>
</table>
</form>
</body>
</html>Come on~~~