Form creation

All HEML forms start with a form element.

<form action="" method="">
</form>
Copy the code

The action attribute of the form tag indicates the url of the daemon to which the form is submitted. The Method attribute of the form tag indicates how the form is submitted, either get or POST

A single-line text box

An input element with the type attribute value set to text can create a single-line text box, which is a single label.

   <form action="" method=""> <p> Please enter your name: <input type="text"> </p> <p> Registered institution: <input type="text" value=" Henan Polytechnic University "Disabled > </p> <p> <input type="text" placeholder=" placeholder ">Copy the code

The value property represents a value that has been filled in. The placeholder property is the hint text, it’s going to be written in light color text inside the text box, not the value in the text box, and the disabled property means that the user can’t interact with the element, so it’s “locked”

The radio button

Radio’s input element, set to radio with the type attribute value, can create radio buttons, just like an old radio where you press one button and other buttons pop up automatically

<p> Gender: <label><input type="radio" name="sex" value="Male" checked>male</label>
           <label>
               <input type="radio" name="sex" value="Female">female</label>
           
       </p>< p > blood type:  <input type="radio" name="bloodtype" value="A" id="A"> <label for="A">A </label> <input type="radio" name="bloodtype" value="B" id="B"> <label for="B">B</label> <input type="radio" name="bloodtype" value="O" checked id="O"> <label for="O">O</label> <input type="radio" name="bloodtype" value="AB" id="AB"> <label for="AB">AB</label> </p>Copy the code

Mutually exclusive radio buttons should have their name set to the same value, and that’s the only way to do that is to select one and the other one will pop up and radio buttons should have value, So what you’re submitting to the server is the value property and the value radio button, if checked, is selected by default and to make the user experience better by using the label tag you can bind the text to the radio button, so that when the user clicks on the text, it can be viewed as clicking on the radio button. In HTML4, buttons and text were bound with id and for, and input tags were not wrapped with label tags.

Check box

Input elements that are set to checkbox with the type attribute value can create checkboxes

<p> Hobbies: <label><input type="checkbox" name="hooby" value="Basketball">basketball</label><label> <input type="checkbox" name="hooby" value=" soccer "> Soccer </label> <label> <input type="checkbox" name="hooby" Value =" volleyball "> volleyball </label> <label> <input type="checkbox" name="hooby" value=" badminton "> badminton </label> <label> <input Type ="checkbox" name="hooby" value=" table tennis "> table tennis </label> </p>Copy the code

The password

The input element with the type attribute value set to password sets the password box

<p> Please enter the password: <input type="password">
       </p>
Copy the code

The drop-down menu

The select TAB represents the drop-down menu, and option is its internal option. The requirements are the same as for unordered lists.

<p> Select your favorite programming language: <select name="" id="">
               <option value="JavaScript">JavaScript</option>
               <option value="php">php</option>
               <option value="java">java</option>
               <option value="c++">c++</option>
           </select>
       </p>
Copy the code

Multi-line text box

Textarea represents a multi-line text box, and the Rows and COLs properties are used to define the number of rows and columns in a multi-line text box.

<p> Message: <textarea name="" id="" cols="30" rows="10"></textarea>
       </p>
Copy the code

Three common buttons

There are three common buttons in a form, and they are all input tags, but the type attribute is different.

     <p>
           <input type="button" name="love">
       </p>< p > < input type = "submit" name = "submit" > < / p > < p > < input type = "reset" name = "reset" > < / p >Copy the code