Today is the 60th day of learning, no matter whether it is really rewarding every day, but with today ’s <form> tag learning, it is really getting closer and closer to a staged victory, and the light of success is beginning to be seen When I arrived, the second day of my study, a dear friend encouraged me, you can develop a habit in 60 days, I hope! ! !
Let me talk about the non-meta tags in the <meta> tags that were not finished yesterday
<title>oldboy</title>
What is set is what is inside the red frame.
<link rel="icon" href="http://www.jd.com/favicon.ico">
The address of this icon is displayed
<link rel="stylesheet" href="css.css">
Introduce css mode for rendering. I have n’t learned css yet, so I wo n’t say much for now.
<script src="hello.js"></script>
It ’s a bit like the one above. I did n’t even learn the name. I do n’t know for now.
The following is the main content of today, <body> tag
There are two types of labels:
块级标签：<p><h1><table><ol><ul><form><div>
No matter what the situation is, it occupies the entire line and can be seen when setting the background color
内联标签：<a><input><img><sub><sup><textarea><span>
The length of the label is determined by the length of the text
First, the basic label
<hn>: The value range of n is 1 ~ 6; from large to small. It is used to indicate the title.
<p>: Paragraph tag. The wrapped content is wrapped. There is also a blank line between the upper and lower content.
<b> <strong>: Bold labels.
<strike>: Add a center line to the text.
<em>: The text becomes italic.
<sup> and <sub>: superscript and subscript.
<br>: Line break.
<hr>: horizontal line
<div> <span>: Their main effect is no effect, but later they will be used for specific settings for a certain segment.
Difference: <div> block-level tags <span> inline tags
Some features:
Characteristics of block elements
Always start on a new line; the
width defaults to 100% of its container, unless a width is set.
It can accommodate inline elements and other block elements
Features of inline elements
It is on one line with other elements; the
width is the width of its text or picture, and it cannot
be changed . Inline elements can only hold text or other inline elements
Special characters
& lt; (less than) & gt; (greater than) & quot; & copy; & reg;
Second, the graphic tag: <img>
src: The path to display the picture.
alt: There is no prompt when the image is loaded successfully.
title: Prompt information when the mouse is hovering.
width: the width of the picture
height: the height of the picture (only one of the two attributes of width and height will automatically scale proportionally.)
3. Hyperlink tag (anchor tag) <a>
href: The format of the resource path to be connected is as follows: href = "http://www.baidu.com"
target: _blank: Open the hyperlink in a new window. Frame name: Open the connection content in the specified frame.
name: Define a bookmark for a page.
Used to jump href: #id. (Anchor)
Each tag can be set id, how to set the id is more arbitrary, as long as he is guaranteed to be unique, add # in front of href when jumping to indicate that the target is a certain id
Four list tags:
<ul>: Unordered list
<ol>: ordered list
<li>: each item in the list.
<dl> definition list
<dt> list title
<dd> list item
It ’s better to try this one more, see examples
<ol> <li>111</li> <li>22</li> <li>333</li> </ol>
< dl > < dt > Chapter 1 </ dt > < dd > Section 1 </ dd > < dd > Section 2 </ dd > < dd > Section 3 </ dd > </ dl > < ul > < li > 111 </ li > < li > 22 </ li > < li > 333 </ li > </ul>
The corresponding effect is like this
Six form tags <form>
Very important, I will rely on him later
The form is used to transfer data to the server.
The form can contain input elements , such as text fields, check boxes, radio boxes, submit buttons, and so on.
The form can also contain textarea , select, fieldset, and label elements .
1. Form Properties
The HTML form is used to receive different types of user input. When the user submits the form, the data is transmitted to the server, so that the user interacts with the Web server. Form tag, all content to be submitted should be in this tag.
action: where to submit the form. Generally, it points to a program on the server side, and the program receives the data submitted by the form (ie, the form element value) for corresponding processing, such as https://www.sogou.com/web
method: The form submission method post / get The default value is get (envelope)
get: 1. The submitted key-value pair. Behind the URL in the address bar. 2. The security is relatively poor. 3. There is a limit to the length of the submitted content.
post: 1. The submitted key-value pair is not in the address bar. 2. The security is relatively high. 3. The theoretical length of the submitted content is unlimited.
Get / post are two common request methods.
2. Form elements
<input> tag attributes and corresponding values
type: text text input box
password password input box
radio radio box
checkbox checkbox
submit button
button (need to be used with js.) What is the difference between button and submit?
file Submit the file: the form form needs to add the attribute enctype = "multipart / form-data"
name: the key of the form submission item. Note the difference with the id attribute: the name attribute is the name used when communicating with the server; and the id attribute is the name used by the browser side, this attribute is mainly for the convenience of client programming, and in css The
value used in JavaScript : the value of the form submission. For different input types, the usage of the value attribute is also different:
? 12345type = "button", "reset", "submit"-defines the text displayed on the button type = "text", "password", "hidden"-defines the initial value of the input field type = "checkbox", "radio "," image "-define the value associated with the input
checked: radio and checkbox are checked by default
readonly: read only. text and password
disabled: Easy to use for all input.
You need to practice more of the above, or remember it here, and turn it over when you use it.
<h1>注册页面</h1> <form action="http://127.0.0.1:8090/index" method="post" enctype="multipart/form-data"> <p>姓名<input type="text" name="username" placeholder="姓名"></p> <p>密码<input type="password" name="password" placeholder="密码" readonly="readonly"></p> <p>爱好： 音乐<input type="checkbox" name="hobby" value="music" checked="checked">电影<input type="checkbox" name="hobby" value="movie"></p> <p>性别： 男<input type="radio" name="gender" value="men">女<input type="radio" name="gender" value="women"></p> </form>
That's it for the time being, and continue to insist that you should be able to rent a server and give it a try.