The form of grammar

<form method="post" action="result.html" > name: <input type="text" name="name" <input type="password" name="pass" /> <input type="submit" name="Button" value=" submit" /> <input type="reset" name=" reset" Value =" /> </form>Copy the code

  • Method attribute

    • The Method attribute specifies the HTTP method to use when submitting the form
    • Rules how to send the form data commonly used value: get | post
    • Post is usually used to submit form data in actual web development

  • The action attribute

    • Represents where to send form data
    • If the action attribute is omitted, the action is set to the current page

  • The name attribute

    • If the input element does not have a name attribute, the form data will not be submitted to the “result.html” page

  • < fieldset >

    • The < fieldset > element combines related data in the form
    • The < legend > element defines the title for the < fieldset > element
<form action="action_page.php">
<fieldset>
<legend>Personal information:</legend>
First name:<br/>
<input type="text" name="firstname" value="Mickey">
<br/>
Last name:<br/>
<input type="text" name="lastname" value="Mouse">
<br/><br/>
<input type="submit" value="Submit"></fieldset>
</form> 
Copy the code

Form element format

The text box

<input type="text" name="userName" value=" userName" size="30" maxlength="20" />Copy the code

The password

<input  type="password "  name="pass"  size="20" /> 
Copy the code

The radio button

<input type="radio" name="sex" value=" male "Checked /> male <input type="radio" name="sex" value=" female" /> femaleCopy the code

Check box

<input type="checkbox" name="interest" value="sports"/> Sport <input type="checkbox" name="interest" value="talk" checked <input type="checkbox" name="interest" value="play"/> Play gameCopy the code

List box (drop-down list)

<select name=" select name "> <option value=" select value "> 1</option> <option value=" select value "> 2</option> </select>Copy the code

button

<input type="reset" name="butReset" value="reset button "/> <input type="submit" name="butSubmit" value="submit button "/> <input /> <input type="image" SRC ="images/login.gif" />Copy the code

Multiline text fields

<textarea name="showText" cols="x" rows="y"> </textarea>Copy the code

File domain

<form action=" " method="post" enctype="multipart/form-data"> <p><input type="file" name="files" /> <input type="submit" Name ="upload" value=" upload" /></p> </form>Copy the code



HTML5 < datalist > element

  • The < datalist> element specifies alist of predefined options for the < input > element
  • Users are presented with a drop-down list of predefined options as they enter data
  • The list attribute of the < input > element must reference the ID attribute of the < datalist > element
<form action="action_page.php">
<input list="browsers">
<datalist id="browsers">
   <option value="Internet Explorer">
   <option value="Firefox">
   <option value="Chrome">
   <option value="Opera">
   <option value="Safari">
</datalist> 
</form>
Copy the code

email

< p > email: < input type = "email" name = "email" / > < / p > < input type = "submit" / >Copy the code

The url

<p> <input type="url" name="userUrl"/>Copy the code

digital

< p > please enter a number: < input type = "number" name = "num" min = "0" Max = "100" step = "10" / > < / p > < input type = "submit" / >Copy the code

The slider

< p > please enter a number: < input type = "range" name = "range1 min =" 0 "Max" = "10" step = "2" / > < / p > < input type = "submit" / >Copy the code

The search box

<p> <input type="search" name="sousuo"/></p>Copy the code

Forms Advanced application

Hidden field

<input type="hidden" value="666" name="userid">
Copy the code

Read-only and Disabled

<input type="text" name="name" value=" "readonly> <input type=" "disabled value=" save ">Copy the code

Primary validation of the form

Form primary validation methods

  • placeholder
  • required
  • pattern

placeholder

An input field provides hints that describe what the field expects from the user. The hints are displayed by default, and disappearing when the field is entered applies to the input tags: text, search, URL, email, and Password

<input type="search" name="sousuo" placeholder=" placeholder "/>Copy the code

required

The content in the text box cannot be blank. Otherwise, users are not allowed to submit the form. Input tags are suitable for text, search, URL, email, password, number, checkbox, radio, and file

<input type="text" name="username"  required/>
Copy the code

pattern

The user’s input must conform to the rules indicated by the regular expression, otherwise the form cannot be submitted

<input type="text" name="tel"  required pattern="^1[358]\d{9}" />
Copy the code

conclusion