The second web front-end training (HTML)

Posted by Gestahr on Fri, 04 Feb 2022 07:53:38 +0100

1. Video link

[excellent limit] HTML+CSS+JavaScript+jQuery front-end compulsory course, Xiaobai teaching, front-end foundation, complete version_ Beep beep beep_ bilibili

2. Tutorial link

HTML form | rookie tutorial

3. Form

3.1 form

Form elements allow users to enter content in the form, such as text fields, drop-down lists, radio buttons, checkboxes, and so on.

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.

Method: form submission method: get Post , get , post , upload , etc

get: by default, it is an active acquisition method. The data is placed on the url. The capacity of the data is limited, the security is poor, and there is a cache

post: the data is placed in the requesting entity. Theoretically, there is no limit on the amount of data. It is relatively safe and there is no cache

3.2 input

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.

Each form must have a name and id, and the radio box label radio. For example, if you choose between men and women, you need to set the names of the two radios to be the same to ensure that they cannot be selected at the same time. Check box label and check box name also need to be set the same.

Example code:

<!DOCTYPE html>
		<meta charset="utf-8" />
		<title>Forms and form elements</title>
		<form action="#" method="get" id="myform" name="myform">
			No.:<input type="hidden" name="userid" value="1" /> <br />
			full name:<input type="text" value="zhangsan" name="username" /> <br />
			password:<input type="password" name="userpwd"/> <br>
			Gender: Male<input type="radio" name="userSex" value="man"/> 
				female<input type="radio" name="userSex" value="woman" />	<br>
			Hobbies: singing<input type="checkbox"  name="userHobby" value="sing" /> <br />
				dance<input type="checkbox" name="userHobby"  value="dance"/> <br />
				Rap<input type="checkbox" name="userHobby"  value="rap"/> <br />
			birthday:<input type="date" name="userData"  /> <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/baidu.png" />

Instance effect:

 3.3 textarea

This label defines a multiline text input control. The text area can accommodate an unlimited number of text, and the size of the textarea can be specified through the cols and rows attributes. Cols specifies the visible width within the text area. Rows specifies the number of visible lines in the text area.

Introduction:<textarea name="remark" rows="5" cols="50">11111</textarea> <br />

 3.4 label

The label label defines a label (tag) for the input element. The label element does not present any special effects.
The for attribute of the label label should be the same as the id attribute of the relevant element. At this time, clicking the label will automatically focus on the element

 3.5 button

Example code

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


 3.6 select 

select is used to define the drop-down list

Example code:

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

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

 4. Common character entity

In HTML, some characters are reserved.
The less than sign (<) and the greater than sign (>) cannot be used in HTML because browsers mistakenly think they are tags.
If we want to display reserved characters correctly, we must use character entities in the HTML source code. Entity name is case sensitive!

Topics: Javascript Front-end html