Second web front-end training notes (HTML forms and common character entities)

Posted by freebsdntu on Sat, 05 Feb 2022 06:06:58 +0100

preface

This note mainly records the knowledge of learning HTML forms. If there are mistakes, please point them out. Thank you very much!

Attach a link to the learning video: [excellent limit] HTML+CSS+JavaScript+jQuery front-end compulsory course, Xiaobai teaching, front-end foundation, complete version_ Beep beep beep_ bilibili

1. form label (block level element)

The form tag is used to create an HTML form for user input.
Forms can contain input elements, such as text fields, check boxes, radio boxes, submit buttons, and so on. You can also include elements such as textarea. Forms are used to transfer data to the server. The form element is a block level element, and a line break occurs before and after it.

attribute	value	describe
action	URL	Specify where to send the form data when submitting the form
method	get,post	Specifies the HTTP method used to send form data
name	Form_name	Specifies the name of the form
target	_blank _self _ parent_top framename	Specify where to open the action URL
id		Unique identification

Method: form submission method: get, post
get: (default), an active way to obtain data. The data is placed on the url. The capacity of the data is limited, the security is poor, there is a cache, and the speed is twice that of post. It is used to query data

post: the data is placed in the requesting entity. The amount of data is not limited in theory. It is relatively safe and there is no cache. It is used to submit data

2. Form element

2.1.input (single label)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>form </title>
	</head>
	<body>
		<form action="#" method="get" id="myform" name="myform">
			No.:<input type="hidden" name="userId" value="1" /><br>
			full name:<input type="text" name="zhangsan" value="userName" /><br>
			password:<input type="password" name="userPwd" maxlength="6" /><br>
			Gender: Male <input type="radio" name="userSex" name="man" checked="checked" />
			      female <input type="radio" name="userSex" name="woman" /><br>
			Hobbies: singing<input type="checkbox" name="userHobby" value="sing" />
			dance<input type="checkbox" name="userHobby" value="sing" />
			Rap<input type="checkbox" name="userHobby" value="rap" disabled="disabled" /><br>
			birthday:<input type="date" name="userDate" /><br>
			head portrait:<input type="file" name="userHead" /><br>
			<input type="button" value="Normal button"/>
			<input type="reset" value="Reset button"/>
			<input type="submit" value="Submit button"/>
			<input type="image" src="img/1.png"/>
		</form>
	</body>
</html>

The input tag is used to collect user information. Depending on the value of the type attribute, the input field has many forms. Input fields can be text fields, check boxes, radio buttons, buttons, and so on.

2.1.1. Common element type

All form elements need to set the value of name attribute, otherwise the data will not be transferred!!

Text: text box

Password: password box

Radio: radio box (you need to set the same set of name attribute values)

checkbox: check box (you need to set the same set of name attribute values)

Button: normal button

Hidden: hidden field (used to store data that needs to be passed to the server but does not need to be displayed)

File: File field (upload file)

2.1.2. Uncommon element types

Date: date box

submit: submit button

rest: reset button

image: picture button (submit button)

2.1.3. value of element

Checked: whether to select (radio box / check box). By default, available checked="checked" or write only checked is selected

disabled: whether to disable it. The usage is the same as above

maxlength: the maximum character allowed

2.2.textarea text field (double label)

Introduction:<textarea name="remark" rows="5" cols="30">Maker!((write value here)</textarea>

The text field can be stretched, or you can set rows: the height of the text field, and cols: the width of the text field

2.3.label (double label)

<label for="userName">full name</label>: <input type="text" id="userName" name="zhangsan" value="userName" />

The for attribute value of the label tag needs to be the same as the id attribute value of the expression element to focus by clicking the label tag

2.4.button button (double label)

<button type="button">Normal button</button>
<button type="submit">Submit button</button>
<button type="reset">Reset button</button><br>

Similar to the buttons above, but with more functions

be careful:! The default is submit button!

2.5.select drop-down box (double label)

<select name="city">
	<option>Please select a city</option>
	<option value="Beijing">Beijing</option>
	<option value="Shanghai">Shanghai</option>
	<option value="Hangzhou">Hangzhou</option>
</select>

Default: selected multiple: multiple="multiple" visible content at one time: size

Both drop-down boxes and drop-down options can be disabled

Note: when the value attribute value is set in option, the submitted data is the value corresponding to value; If value is not set, the submitted data is a text value

3. Common character entities

< : <;

>: >

Space: >: & nbsp;

3.1. Classification of labels

There are three different types of tag elements in HTML: block element, inline element and inline block element

3.1.1. Block level element

Elements start on a new line, and subsequent elements start on another line; The height, width, row height and top and bottom margins of elements can be set; If the element width is not set, it is 100% of its own parent container (consistent with the width of the parent element), unless a width is set

3.1.2. Inline element

And other elements on the same line; The height, width and top and bottom margins of elements cannot be set; The width of an element is the width of the text or picture it contains. It cannot be changed

3.1.3. Inline block element

And other elements on the same line; The height, width, row height and top and bottom margins of elements can be set

summary

This paper summarizes the relevant knowledge of HTML forms and common character entities

Topics: Front-end html

Programmer Think