HTML <a> tags, forms, iframes

1. <a> tag

Use a picture as a link, just use the picture as the link text

</a>

1. <a href="#">News headline</a>

The # here represents the default value, which will cause the link to jump to the top of the page. If it is written as href="", the effect is the same

If you want to click the link and do nothing, you need to write it as <a href="javascript:;">default value</a>

2. Open a new web page when linking, use the target attribute, the default is target="_self", modify it as follows

<a href=" http://www.baidu.com/ " title="Jump to Baidu" target="_blank">Baidu</a>

illustrate:

The target attribute specifies where to open the hyperlinked document. _blank causes the browser to always load the target document in a newly opened, unnamed window.

3. Define the scroll jump in the page, use the id attribute

For example, there are three titles 1, 2, 3, the requirement is to click the link name to the specified title position

........

........

2. Form

1. When the input is of text type, the value can also be written in advance

<form action="form_action.asp" method="get">
name: <input type="text" name="username" value="George" /><br />
password: <input type="text" name="pwd" value="Bush" /><br />
<input type="submit" value="Submit form" />
</form>

Note: the value of action is the submit address

2. For mutually exclusive radio buttons, the name attribute needs to be added, and the value must be the same, otherwise both can be selected

<label>Gender:</label>
<input type="radio" name="gender" value="0" />男
<input type="radio" name="gender" value="1" />女

3. The checkbox is a multi-select box, and the name should also be defined as the same

<label>Hobbies:</label>
<input type="checkbox" name="like" value="game" />游戏
<input type="checkbox" name="like" value="shopping" />购物
<input type="checkbox" name="like" value="study" />学习

4. Submit, reset form items

<input type="submit" name="" value="提交">
 
<!-- The input type defines a reset button for reset-->
<input type="reset" name="" value="重置">

Definition and usage of value attribute

The value attribute sets the value for the input element.

The usage of the value attribute is different for different input types:

type="button", "reset", "submit" - defines the displayed text on the button
type="text", "password", "hidden" - defines the initial value of the input field
type="checkbox", "radio", "image" - defines the value associated with the input

Note: The value attribute must be set in <input type="checkbox"> and <input type="radio">.

Note: The value attribute cannot be used with <input type="file">.

5. select defines the drop-down box

<label>Origin:</label>
<select name="site">
<option value="0">北京</option>
<option value="1">上海</option>
<option value="2">广州</option>
<option value="3">深圳</option>
</select>

6. The input type is file to define resources such as uploading photos or files

<label>Photo:</label>
<input type="file" name="person_pic">

The effect is as follows

7. Define multi-line text, if you want to precisely control how many words can be entered, you need css

<label>Personal description:</label>
<textarea name="about"></textarea>

8. The for attribute in the label tag makes the value equal to the id attribute in the input to improve the user experience. Click the word to select the option

<label>Gender:</label>
<input type="radio" name="gender" value="0" id="male"><label for="male">男</label>
<input type="radio" name="gender" value="1" id="female"><label for="female">女</label>

Description: The role of value

1). If the form submission method is get, when submitting, the value of name and value will be displayed in the address bar, which is used for small amount of data and non-sensitive information, as follows

2). For sensitive information such as passwords and a large amount of data, you need to use the post method, which uses http protocol messages to submit

3. Inline frame, that is, there will be a separate window in a web page to display other web pages

<iframe src="http://www.baidu.com" width="900" height="500" frameborder="0" scrolling="no">
</iframe>

illustrate:

width, height are used to define the window size

frameborder is used to set the border

scrolling is used to set the scroll bar

use:

1) Multiple frames can be embedded to synthesize pages

<iframe src="http://www.baidu.com" width="900" height="500" frameborder="0" scrolling="no">
</iframe>
<iframe src="001列表.html width="900" height="500" frameborder="0" scrolling="no">
</iframe>

2) Jump within the page

<a href="http://www.baidu.com" target="myframe">百度网</a>
<a href="http://www.itcast.cn" target="myframe">传智播客</a>
<a href="http://www.qq.com" target="myframe">腾讯网</a>
<br />
<iframe src="http://www.baidu.com" width="900" height="500" frameborder="0" scrolling="no" name="myframe">
</iframe>

illustrate:

1. The point of implementation is that the value of the target attribute of all <a> tags should be the same as the value of the name attribute of the <iframe> tag

2. The effect is that Baidu's embedded window is initially displayed on the page. Clicking the link of Tencent.com will display Tencent.com in the embedded window. The effect is as follows