Forms: Forms are mainly used to make dynamic web pages for easy interaction with users

Form syntax:

<form method=" " action=" " enctype="multipart/form-data"></form>

When enctype uses file fields in a form, the enctype encoding property of the form must be set to "multipart/form-data", which means that the form data is submitted in multiple parts.

The method value can be: get/post (post passed to the server in actual development)

action indicates where to send form data (address)

Form elements:

Grammar:

<input  type="text"(input Element type) name="fname" value="text">

type	Specify the type of element. Text, password, checkbox, radio, submit, reset, file, hidden, image, and button, defaulting to text
name	Specify the name of the form element
value	The initial value of the element. A value must be specified when type is radio
size	Specifies the initial width of the form element. When type is text or password, the size of the form element is in characters. For other types, the width is in pixels
maxlength	Maximum number of characters entered when type is text or password
checked	When type is radio or checkbox, specify whether the button is selected

Text box:text

<input type="text" name="text" value="Text Box" size="30" maxlength="10"/>

size: Text box length

maxlength: Text box input Max characters

Password box: password

 <input type="password" name="password" size="30"/>

Radio button:

<input checked name="gender" type="radio" value="male" />male
<input name="gender" type="radio" value="female" />female
<input name="gender" type="radio" value="combination" />combination

checked:Checked state

Check button:

<input  checked name="sport" type="checkbox" value="Basketball" />Basketball
<input name="sport" type="checkbox" value="Football" />Football
<input name="sport" type="checkbox" value="Baseball" />Baseball

Button:

<input type="submit" value="Submit button" />
<input type="reset" value="Reset" / > 
<input type="button" value="General Button" />
Picture Button
<input type="image"  src="./renren.gif" />

Drop-down list:

<select  name="List Name" size="Number of rows">
<option value="Value of option" selected>...</option>
<option value=Value of option>...</option >
</select>

Select:Default selected Item

size: Number of rows displayed in the drop-down list

Multiline text fields:

<textarea  name="text " cols="x"  rows="y">Text Content
</textarea  >

cols: Number of columns displayed

Rows:Number of rows displayed

File field:

<p>
 <input type= "file"  name="files" />
 <input type="submit" name="upload"  value="upload"/>
</p>

Mailbox: Automatically verifies that the Email address is formatted correctly

 <input type="email" name="email" id="box" required/>

Web address: automatically verifies that the URL address is formatted correctly

<p>Please enter your web address:<input type="url"  name= "url "/></p>
<input  type=submit/>

Number: Number number

<input type="number" name="number" value="number" min="0"max="100" step="10" />

min:Minimum allowed

max:maximum allowed

step:legal number interval

Slider: Effects

<input type="range" name="range"  min="0" max="10000000" />

Range (slider)             min:Minimum allowed                     max:maximum allowed  

Search box: search

<input type="search" name="search" />

Hidden domain:hidden

<input type="hidden" value="Hide content" name="info" />

Read-only and Disable:

<input name="text " type= "text"  readonly/>
<input type= "submit"   disabled   value="Preservation"/>

Labels for form elements:

 <label for="box">Confirm Password  </label>
 <input type="password" name="password" id= "box"  required />

Form primary validation method:

placeholder:

A text box of type input provides a hint that describes what the text box expects the user to enter. The hint displays by default and disappears when the content is entered in the text box.

Suitable for input tags: text, search, url, email, password, and so on

required:

Provide that the text box fill-in cannot be empty, otherwise the user is not allowed to submit the form

Suitable for input tags: text, search, url, email, password, number, checkbox, radio, file, and so on

pattern:

User input must conform to the rule specified by the regular expression, otherwise the form cannot be submitted

  <input  type="text"  id="text " required 
 pattern="[-\w\u4E00-\u9FA5]{4,10}"  placeholder="Nickname?"/>