Continuation——Get to know HTML for the first time! ! !
1. Form
1. The role of the form
About the role of the form:The biggest function of the form is to collect user information, the user fills in the form, clicks to submit the data to the server.
2. How to draw the form?
In HTML we use the form tag to draw a form.
Don't worry about writing a form with code here first, the blogger will first explain the precautions for using and drawing a form.
3. Precautions for using the form
-
There can be multiple forms in a web page
-
The form finally needs to submit data to the server. The form tag has an action attribute, which is used to specify the server address
- Such as this code:
form action="http://192.168.111.3:8080/oa/save"></form>- The action attribute is used to specify which server the data is submitted to
- The action attribute, like the href attribute in the hyperlink, can send a request to the server (request)
- Such as http://192.168.111.3:8080/oa/save This is the request path, and the form submission data is finally handed over to: the software corresponding to port 8080 on the 192.168.111.3 machine
- Such as this code:
-
Draw a button, this button can submit the form, you can use the input input field to draw the button, when type="submit", it means it is a submit button, which has the ability to submit the form
-
input type="submit"/>the ability to submit forms, -
input type="button"/> 不具有提交表单的能力，因为这是一个普通按钮 -
input type="text"/>A text box for entering text -
input type="password"/> 一个密码框，用于输入密码 -
input type="checkbox"/> 一个复选框 -
input type="radio"/> 一个单选框
-
-
To set the text displayed on a button, use the value attribute
<input type="submit" value="注册"/>
-
Note that there is not much difference between the following two codes, both of which can send requests to the server, but the form can carry data while sending the request
-
<form action = "http://www.baidu.com"> <input type = "submit" value = "百度"/> </form> -
<a href = "http://www.baidu.com">百度</a>
-
4. Combining forms and forms to write a simple login interface
Demo：
<html>
<!--头-->
<head>
<title>表单</title>
</head>
<!--体-->
<body>
<form action="http://localhost:8080/jd/login">
<table>
<tr>
<td>用户名</td>
<td><input type="text" name="username"/></td>
</tr>
<tr>
<td>密码</td>
<td><input type="password" name="userpassword"/></td>
</tr>
<tr align="center">
<td colspan="2">
<input type="submit" value="登录"/>
<input type="reset" value="清空"/>
</td>
</tr>
</table>
</form>
</body>
</html>
Precautions:
- input type="text" can be followed by value, because the user will fill it in by himself, as much as the user fills in, the value will be displayed
- If the name attribute is written in the form item, it will be submitted to the server. If you don’t want to submit it, don’t write the name attribute
- When the value is not written, the default value of the value is an empty string, and the empty string will be submitted
- The form is submitted to the server in the format of action?name=value&ame=valueame=valueame=value...
In the address bar, you can see the format of the form submitted to the server
5. Make a user login interface
To make a user login interface, you must first conceive what elements, such as
<!——
username
password
Confirm Password
gender
hobby
academic qualifications
Introduction
——>
Everyone can think about how to write it first, and the blogger will do it directly here! ! !
Demo：
<html>
<!--头-->
<head>
<title>表单</title>
</head>
<!--体-->
<body>
<form action="http://localhost:8080/jd/register">
用户名
<input type="text" name="username"/>
<br>
密码
<input type="password" name="userpassword"/>
<br>
确认密码
<input type="password"/>
<br>
性别
<input type="radio" name="gender" value="1"/>男
<input type="radio" name="gender" value="0"/>女
<br>
兴趣爱好
<input type="checkbox" name="interest" value="singing"/>唱歌
<input type="checkbox" name="interest" value="dancing"/>跳舞
<input type="checkbox" name="interest" value="rap"/>rap
<input type="checkbox" name="interest" value="basketball"/>篮球
<br>
学历
<select name="grade">
<option value="high school">高中</option>
<option value="junior college">大专</option>
<option value="undergraduate">本科</option>
<option value="master">硕士</option>
</select>
<br>
简历
<textarea rows="5" cols="40" name="introduce"></textarea>
<br>
<input type="submit" value="注册"/>
<input type="reset" value="清空"/>
</form>
</body>
</html>
(http://localhost:8080/jd/register?username=zhangsan&userpassword=123456&gender=1&interest=singing&interest=dancing&interest=rap&interest=basketball&grade=undergraduate&introduce=%CE%D2%CA%C7%D2%BB%B8%F6%B3%CC%D0%F2%D4%B3)
This is what's in the address bar
Precautions:
- The value in the radio button must be manually specified by itself
- textarea is the meaning of the text field, the text field has no value attribute, the content filled by the user is the value
- With method = "post" the data you submit will not be displayed (on the address bar)
<form action="http://localhost:8080/jd/register" method="post">- method = "get" will display the submitted data (on the address bar)
- If the method attribute is not specified, it defaults to get
- Hyperlinks can also submit data to the server, but the submitted data is fixed, and hyperlinks are get requests, not post requests
6. About the drop-down list supports multiple selection
This part is that when we select something on the web page, we can choose multiple and use the select tag.
Demo：
<html>
<!--头-->
<head>
<title>下拉列表</title>
</head>
<!--体-->
<body>
<select multiple="multiple">
<option>四川</option>
<option>重庆</option>
<option>贵州</option>
<option>云南</option>
</select>
</body>
</html>
If you want to select more than one, hold down the Ctrl key
If you want to set the number of items you want to display on the web page
Demo：
<html>
<!--头-->
<head>
<title>下拉列表</title>
</head>
<!--体-->
<body>
<select multiple="multiple" size="2">
<option>四川</option>
<option>重庆</option>
<option>贵州</option>
<option>云南</option>
</select>
</body>
</html>
7. About controls
(1) hidden control
Demo：
<html>
<!--头-->
<head>
<title>hidden控件</title>
</head>
<!--体-->
<body>
<form action="http://localhost:8080/jd/register">
<input type="hidden" name="userid" value="111"/>
用户代码<input type="text" name="usercode"/>
<input type="submit" value="提交">
</form>
</body>
</html>
Here you can see that it does not appear on the webpage. The hidden part is because this part is hidden, but this part will still be submitted to the server and can be seen in the address bar.
As can be seen from the following pictures:
There will still be userid=111 in the address bar, which is the hidden part, but it will still be submitted.
(2) file control
Regarding the file control, it is used to upload files in the web page
Demo：
<html>
<!--头-->
<head>
<title>file控件</title>
</head>
<!--体-->
<body>
<input type="file"/>
</body>
</html>
（3）readonly和disabled
The same points as readonly and disabled are read-only and cannot be modified. But readonly can submit data to the server, and disabled will not submit data (even if there is a name attribute, it will not submit).
Demo：
<html>
<!--头-->
<head>
<title>readonly和disabled</title>
</head>
<!--体-->
<body>
<form action="http://localhost:8080/taobao/save">
用户代码<input type="text" name="usercode" value="123" readonly />
<br>
用户姓名<input type="text" name="username" value="zhangsan" disabled />
<br>
<input type="submit" value="提交数据" />
</form>
</body>
</html>
The data displayed in the input box cannot be modified, but when you click submit, 123 will be submitted, but zhangsna will not be submitted (it can be seen in the address bar), this is the difference between readonly and disabled.
(4) The maxlength attribute of the input control
Regarding the maxlength attribute, set the maximum value of the number of characters that can be entered in the text box
Demo：
<html>
<!--头-->
<head>
<title>input控件的maxlength属性</title>
</head>
<!--体-->
<body>
<input type="text" maxlength="3"/>
</html>
Only three characters can be entered in this text box, and three or more characters cannot be entered
2. Talking about the id attribute of elements in HTML
The role of the id attribute in HTML is: when the JavaScript language adds, deletes, or modifies any node in the HTML document, the element (node) is obtained before the addition, deletion, or modification. Usually we use the id attribute to get the node object, so The existence of the id attribute makes it easier for us to get elements (nodes).
Precautions:
- Any element (node) in an HTML document has an id attribute, and the id attribute is the unique identifier of the node, so in the same HTML document, the id value cannot be repeated
- When the form submits data, only the data related to the name attribute will be submitted, and the attributes related to the id attribute will not be submitted
- HTML document is actually equivalent to a tree, there are many nodes in the tree, each node has a unique id, JavaScript mainly adds, deletes and modifies the nodes on the DOM tree of this tree, DOM (document)
3. div and span in HTML
1. What are divs and spans?
- Both divs and spans can be called "layers"
- The function of the layer is to ensure the flexible layout of the page
- Layers are boxes one by one, and div nesting is box-in-box
- div and span can be positioned, as long as the x-axis and y-axis coordinates of the upper left corner of the div are set
2. understand
In fact, the earliest web pages were laid out using tables, but tables were inflexible and too rigid. Modern web development uses div layouts, and tables are rarely used for layouts.
3. The difference between div and span
The div occupies a single line, and the span does not occupy a single line! ! !
Demo1：
<html>
<!--头-->
<head>
<title>div和span</title>
</head>
<!--体-->
<body>
<div>1+1
<div>=
<div>2</div>
</div>
</div>
</body>
</html>
Demo2：
<html>
<!--头-->
<head>
<title>div和span</title>
</head>
<!--体-->
<body>
<span>1+1
<span>=
<span>2</span>
</span>
</span>
</body>
</html>
Well, this is the end of this blog, and the part about getting acquainted with HTML has come to an end today. Next, the blogger will update you on the basic knowledge of JavaScript! ! !
Life is like this, you have to endure loneliness to keep prosperity.