web front end learning notes day07html form form

Web page basic layout

html

html infrastructure

html base tag

html tag properties

html text formatting label

html entity escape character + html block level tag and line level tag

W3C specification + html semantic tag + file name specification

html form

1. General properties of labels

The label consists of label name, label attribute and text content (Note: single label has no text)

Tag attributes are a way to describe tags.

Tag attributes are divided into general attributes, free attributes and user-defined attributes.

General attributes: all tags have the following attributes, for example:

id: used to give the tag a unique name
Class: give the tag a class name
Style: sets the inline style of the label
title: a prompt text for the current label. The prompt content displayed when the mouse moves to the label position

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- id : You can use the alias to render or modify the label style id The lock name should preferably reflect the label content 
		id Must be unique in a web page-->
		<p id="p1">Paragraph 1</p>
		
		<!-- class: Give a group of tags a class name -->
		<div class="text">div</div>
		<p class="text">p</p>
		
		<!-- style:Used to style the current label,Inline style -->
		<p style="width:100px;color: red;border: 3px solid aquamarine;">This is a test</p>
		
		<!-- title Give the current tag a prompt text -->
		<p title="test">test</p>
	</body>
</html>

2. Custom label attributes

Custom tag: usually used for value transfer or lazy image loading

Format: data-*

< img data SRC = "picture name" alt = "prompt text" / >

3.table

3.1. Draw basic table

1.table: mainly used to render formatted data.

< tr >: Line

<td>: column

< th >: the header is mainly used to explain the following contents. The contents of th will be automatically bold and centered

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>form</title>
	</head>
	<body>
	<table>
	<tr>
		<th>Content 1</th>
		<th>Content 2</th>
		<th>Content 3</th>
	</tr>
	<tr>
		<td>Content 1</td>
		<td>Content 2</td>
		<td>Content 3</td>
	</tr>
		</table>
	</body>
</html>

function

2. Table attributes:

Border: the width of the table border. The default unit is px (pixels)
Width: the width of the table. The default unit is px
align: horizontal alignment of the table (left (default), right, center)
Cell adding: the distance between the cell text and the border
cellspacing: spacing of cell borders

(1) Change < Table > to

Operation results

(2) add cellpadding and cellspacing attributes

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>form</title>
	</head>
	<body>
	<!-- table+tr*2>td{content $}*3 -->
	<table border="1" width="200" cellspacing="0" cellpadding="10">
	<tr>
		<td>Content 1</td>
		<td>Content 2</td>
		<td>Content 3</td>
	</tr>
	<tr>
		<td>Content 1</td>
		<td>Content 2</td>
		<td>Content 3</td>
	</tr>
		</table>
	</body>
</html>

Operation results

3.2. Cross row and cross column of table

rowspan: cross row

colspan: span columns

1)rowspan

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!--Emment Syntax: table[border=1 width=500 align=center]>tr*3>td{Content area $}*3 +Tab-->
		<table border="1" width="500" align="center">
			<tr>
				<!-- valign:Vertical alignment( top,middle,bottom) -->
				<td rowspan="2" valign="top">Content area 1</td>
				<td>Content area 2</td>
				<td>Content area 3</td>
			</tr>
			<tr>
				<td>Content area 2</td>
				<td>Content area 3</td>
			</tr>
			<tr align="center">
				<td>Content area 1</td>
				<td>Content area 2</td>
				<td>Content area 3</td>
			</tr>
		</table>
	</body>
</html>

Operation results

2)colspan

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
	</head>
	<body>
		<!-- table[border=1 width=200 align=center]>tr*3>td{content $}*3 +Tab -->
		<table border="1" withd="400" align="center">
			<tr>
				<td colspan="3" align="center">Content 3</td>
			</tr>
			<tr>
				
				<td colspan="2" align="center">Content 2</td>
				<td rowspan="2">Content 3</td>
			</tr>
			<tr>
				<td>Content 1</td>
				<td>Content 2</td>
			</tr>
		</table>
	</body>
</html>

Operation results

3.3. Draw complete table

< caption >: title
< thead >: combine header contents of html table
< tboby >: combine the subject contents of html tables
< tFoot >: combine the contents of the footer of the html table

If you press tab directly without generating, select and press tab again

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- table[border=1 width=600 align=center]>(caption{Canteen menu})+(thead>tr>th*4)+(tbody>tr*3>td*4)+(tfoot>tr>td[colspan=4]) -->	
	<table border="1" width="800" align="center">
		<caption>Canteen menu</caption>
		<thead>
			<tr>
				<th>Price</th>
				<th>Dish name</th>
				<th>quantity</th>
				<th>surplus</th>
			</tr>
		</thead>
		<tbodyy>
			<tr>
				<td>5</td>
				<td>Sweet and sour pork chops</td>
				<td>100</td>
				<td>6</td>
			</tr>
			<tr>
				<td>3.5</td>
				<td>Stewed egg with minced meat</td>
				<td>100</td>
				<td>2</td>
			</tr>
			<tr>
				<td>2</td>
				<td>stir-fried Chinese cabbage</td>
				<td>100</td>
				<td>30</td>
			</tr>
		</tbodyy>
		<tfoot>
			<tr>
				<td colspan="4">Note: the vegetable price is only today's price</td>
			</tr>
		</tfoot>
	</table>					
	</body>
</html>

Operation results

4. Form label

form tag is one of the core tags of all tags. It is an important tag used to realize front-end and back-end interaction

Common attributes:

Name: form name (difference form)
action: address of the form data submission (background file name:. jsp/.php/.asp/.aspx/.py or web address, # indicating that the submitted data is under the current file)
Method: the method of submitting data from the front end to the back end, mainly including get and post. The default is get

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<form name="menu" action="https://baidu.com" method="get">
			<input type="text" name="userName" placeholder="Please enter your name" />
			<input type="submit" />
		</form>
	</body>
</html>

Run

Feel free to enter. Click submit to see our input

Change the submission method to method="post"

This is the difference between get request and post request. You can query and learn the detailed difference

4.1 form elements

Input class: mainly used to input, select or issue instructions
textarea class:
select class:
button class:

1)input class

text	Single line input field for text input
reset	Reset button
button	Normal button
checkbox	check box
radio	radio button
image	Picture submit button
submit	Submit Form
password	Password field

< input type = "reset" / >: reset button nput type = "file" / >: file box

input exercise code

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<form action="https://baidu.com">
			
			<!-- text
			Properties: placeholder((prompt)/name((named)/
			minlength and maxlength(least/Maximum number of characters to enter/
			disabled(Failure)/readonly((read only)/vaule((default)/pattern(Regular matching)  -->
			<!-- Focus cannot be obtained and cannot be modified -->
			<input type="text" name="text" placeholder="Please enter a number" value="100" disabled="disabled">
			<!-- Focus can be obtained and cannot be modified -->
			<input type="text" name="text" placeholder="Please enter a number" value="100" readonly="readonly">
			
			<!-- radio: Radio box, common properties: name(Must have value，checkout((checked or not),
			disabled(Failure), readonly((read only) 
			name Same representative radio It's a group, a group radio only one checkout-->
			<input type="radio" name="sex">male
			<input type="radio" name="sex" checked="checked">female<br/>
			
			<!-- checkbox:check box/Check box common properties: name(Must have value，checkout((checked or not),
			disabled(Failure), readonly((read only) -->
			<input type="checkbox" name="fav">Sweet and sour pork chops
			<input type="checkbox" name="fav">Shrimp with salt and pepper
			<input type="checkbox" name="fav">Stewed egg with minced meat
			<input type="checkbox" name="fav" checked="checked">Fried meat with green pepper
			
			<!-- file:File upload button -->
			<input type="file" /> <br>
			
			<!-- button: Normal buttons are often used to invoke script code( js)code
			Common attributes: name(Must have value(Button title)，disabled(Failure),-->
			<input type="button"  value="Sign in" >
			
			<!-- img:Image button usage and button equally
			There is a special attribute, src: Loading pictures, with submission function-->
			<input type="image" src="btn.png" title="Refresh">
			
			<!-- submit: Submit button to submit the form data to the background -->
			<input type="submit">
			
			<!-- reset:Reset button to restore the contents entered by all components of the form to the original state -->
			<input type="reset" value="cancel">
			
		</form>
	</body>
</html>

Operation results

2) textarea class

A text field, also known as a multiline text box. It is mainly used to input large quantities of content.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<form action="">
			<!-- Common attributes: name,id,cols(Column),rows((row),
                placeholder,minlength,
                maxlength,required(Required) -->
			<textarea name="meme" id="meme" cols="30" rows="10">remarks</textarea>
		</form>
	</body>
</html>

3) select class

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	<form action="">
		
		<!-- select:Drop down list box, default single item selection
		 use option Render each option-->
		<label for="meun">menu</label>
		<!-- multiple:Indicates that multiple selections can be made. The drop-down list box becomes a list box
			size:Maximum number of rows displayed -->
		<select id="meun" multiple  size="2">
			<option value="shrimps">Shrimp with salt and pepper</option>
			<option value="custard">Stewed egg with minced meat </option>
			<option value="custard">Sweet and sour pork chops</option>
			<option value="custard">Braised chicken leg</option>
		</select>
	</form>
	</body>
</html>

4) button class

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- button: Normal button, with submission function, can be used separately,
		be not in form Element, if written in form With submission function -->
		<button id="btnok">confirm</button> <!-- this button Mainly used to call js code -->
		<form action="">
			<input type="text" name="info">
			<button>Submit</button> <!-- And input Medium submit Consistent function -->
		</form>
	</body>
</html>

5) Form common elements

Name: field name
Value: initial value of the field
readonly: Specifies that the input field is read-only
Disabled: Specifies that the input field is disabled

4.2.iframe frame label

The < iframe > element will create an inline frame containing another document, which is also another web page embedded in a web page, which is equivalent to another window nested in the web page

Common attributes:

Name: frame name
src: import external html
scrolling: scroll bar (yes, no, auto)
Width: width (%, px)
Height: height (%, px)
frameborder: whether there is a border (1, 0)
marginheight: distance from frame to top and bottom (%, px)
marginwidth: the distance from the frame to the left and right (%, px)

Create a new iframe directory

Then create a new banner html, nav. html ,content1. html,content2. html

banner.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<img src="https://img. alicdn. com/tfs/TB1R5fsgyDsXe8jSZR0XXXK6FXa-281-80. Jpg "ALT =" loading failed ">
	</body>
</html>

nav.html

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	<!-- ul>li{classification $}*4>ul>li*5>a[href]{content $} -->
	<ul>
		<li>Category 1
			<ul>
				<li><a href="content1.html" target="main">Content 1</a></li>
				<li><a href="content2.html" target="main">Content 2</a></li>
				<li><a href="">Content 3</a></li>
				<li><a href="">Content 4</a></li>
				<li><a href="">Content 5</a></li>
			</ul>
		</li>
		<li>Category 2
			<ul>
				<li><a href="">Content 1</a></li>
				<li><a href="">Content 2</a></li>
				<li><a href="">Content 3</a></li>
				<li><a href="">Content 4</a></li>
				<li><a href="">Content 5</a></li>
			</ul>
		</li>
		<li>Classification 3
			<ul>
				<li><a href="">Content 1</a></li>
				<li><a href="">Content 2</a></li>
				<li><a href="">Content 3</a></li>
				<li><a href="">Content 4</a></li>
				<li><a href="">Content 5</a></li>
			</ul>
		</li>
		<li>Classification 4
			<ul>
				<li><a href="">Content 1</a></li>
				<li><a href="">Content 2</a></li>
				<li><a href="">Content 3</a></li>
				<li><a href="">Content 4</a></li>
				<li><a href="">Content 5</a></li>
			</ul>
		</li>
	</ul>
	</body>
</html>

content1.htm and content2 html，content2.html changed to content 2 loading...

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<p>Content 1 is loading..</p>
	</body>
</html>

Create a new iframe html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- banner -->
	<iframe src="iframe/banner.html" scrolling="no" frameborder="0"  width="100%" "></iframe>
		<!-- Navigation -->
		
		<iframe src="iframe/nav.html" scrolling="auto" frameborder="0"  width="30%"  height="300px"></iframe>
		<!-- Core content -->
	
	<iframe src="iframe/content.html" name="main" scrolling="no" frameborder="0"  width="60%" heigth="300px"></iframe>
	
	</body>
</html>

Operation results

Note: in actual development, minimize iframe. Because it destroys the forward and backward functions, and is not conducive to SEO

Keywords: Front-end html css

Added by colby.anderson on Wed, 22 Dec 2021 08:38:00 +0200

Programming VIP

web front end learning notes day07html form form

Web page basic layout

1. General properties of labels

2. Custom label attributes

3.table

3.1. Draw basic table

1.table: mainly used to render formatted data.

2. Table attributes:

3.2. Cross row and cross column of table

1)rowspan

2)colspan

3.3. Draw complete table

4. Form label

4.1 form elements

1)input class

Operation results

2) textarea class

3) select class

5) Form common elements

4.2.iframe frame label

Popular Keywords