HTML form basics

1. Create a form

Each form starts with a form start tag and ends with a Form end tag. Between the two tags are the description tags, controls, and buttons that make up the form. Each control has a name property that identifies the data when the form is submitted. The form start tag can have several attributes, the most important of which are Action and Method. Set the value of the Action property to the URL of the script on the server that processes the data when the visitor submits the form. The method property value is either GET or POST. Most of the time it’s post.

  <form method="post" action="xxx.php">
  </form>
Copy the code

Organize form elements: If the form has a lot of information to fill in, you can use a Fieldset element (similar to a border) to group related elements together to make the form easier to understand. You can also use the Legend element to provide a title for each fieldset that describes the purpose of each group (sometimes h1 to H6 can also be used).

<form action=""> <fieldset> <h1>... </h1> </fieldset> <fieldset> <h2>... < / h2 > < div > < fieldset > < div class = "" > < legend > headings < legend > < / div > < fieldset > < / div > < fieldset > < / form >Copy the code

2. Create text

A text box can contain a line of plain text that can be anything the visitor wants to enter, usually for name, address, and so on. Each text box is represented by an input tag with type = “text”. There are other attributes available besides Type, the most important of which is name. The server-side script uses the name you specify to get the value entered by the visitor in the script text box or the default value (the value attribute value).

Steps to create a text box:

  • 1) Enter the label that allows visitors to identify the text field: the label describes the text that the form field is used for, and the label element has a special attribute: for. If the for value is the same as the ID value of a form field, the label is associated with what that field displays.

    <label for = "idLabel "> </label>Copy the code

  • 2) Type <input type = “text” to indicate the text box, and then type name = “dataname” to let the server script recognize the text of the input data

  • 3) Set id = “IDLabel”, as in step 1), to have the label element associated with the display text box. It is not necessary that the ID and for attributes be set the same.

  • 4) If required, enter value=”default”, where default is the initial default for this field.

  • 5) If needed, enter placeholder = “hinttext”, where Hinttext is the data originally displayed in this field to guide the user’s input, and when the input element gets focus, the text will disappear. User input content.

  • 6) If required, enter required = “Required” to indicate that the form should only be submitted if this field has a value.

  • 7) Enter autofocus or autofocus = “autofocus” if necessary. If this is the first form control to have this property, the input element gets focus by default when the page loads.

  • 8) If necessary, enter to define the size of the text box by typing size=”n”, where n is the width of the text box, in characters.

  • 9) If necessary, enter maxlength=”n”, where n is the maximum number of characters allowed in the text box.

<fieldset> <legend> Submit form </legend> <label for = "IDLabel "> Last Name: </label> <input type = "text" id = "idlabel" name = "dlabel" class = "field-large" required autofocus /> </fieldset>Copy the code

It is not necessary but common to have the same values for the for, ID, and name attributes (with the exception of checkboxes and checkboxes, for which a set of inputs uses the same name, and ids that are unique for each input).

3. Create a password box

The steps for creating a password box are much the same as for creating text, except that the value of type is changed to type = “password”. Text entered in the password box is hidden with dots or asterisks.

<fieldset> <legend> Submit form </legend> <label for = "IDLabel "> Last Name: </label> <input type = "password" id = "idlabel" name = "dlabel" class = "field-large" required autofocus /> </fieldset>Copy the code

Create email boxes, search boxes, phone boxes, and URL boxes

The only difference is the change in the value of the type attribute.

Email: type = "email"; Search box: type = "search"; Call box: type = "tel"; URL box: type = "URL ";Copy the code

4. Create an option button

Set type = “radio” to the input element to create a radio button. Then enter name and value, checked or Checked = “checked” if necessary so that the radio button is activated by default when the page opens. Only one of a set of radio buttons can add this property.

     <input type = "radio" name = "gender" value = "Male" />
     <label for = "idgender"> Male </label>
Copy the code

5. Create check boxes

Only one answer can be selected from a set of radio buttons; But from a set of checkbox buttons, visitors can select any number of answers.

  • 1) Input type = “checkbox”,
  • 2) Enter name = “boxset,id = “idLabel”, value = “data”
  • 3) Type Checked or checked = “checked” so that the check box is selected by default when the page opens.
  • 4) Input label for = “idLabel”



<input type = "checkbox" id = "email- ok" name = "email - signup" value = "user- emails" /> <label for = "email- ok" > It's okay to ... </label> <input type = "checkbox" id = "email-ok- to" name = "email - signup" value = "user- emails- to" /> <label for =  "email- ok-to" > emali me with ... </label> <input type = "checkbox" id = "email- ok- three" name = "email- signup" value = "user- emails- three" /> <label  for = "email- ok- three" > messages from other ... </label>Copy the code

6. Create text area:

If you want to fill in space for questions or comments, use the text area.

  • 1) enter the textarea

  • 2) Enter id = “idLabel”, enter name = “dataname”

  • 3) Enter maxlength = “n” if required

  • 4) Type cols = “n” where n is the width of the text and rows = “n” where n is the height of the text area.

    <textarea name = "bio" id = "bio" cols = "40" rows = "10"> </textarea>
Copy the code

7. Create a selection box

A selection box is used to provide the visitor with a set of options from which to choose. Typically rendered in a drop-down menu style, the selection box is rendered as an item box with scroll bars if the user is allowed to select multiple options.

  • 1) Enter select

  • 2) Enter id = “idLabel”, enter name = “dataname”

  • 3) If necessary, set size=”n”, where n represents the height of the selection box

  • 4) Enter multiple or multiple = “multiple” if desired, allowing the visitor to select more than one menu option (by holding down the Control or Command key to select).

  • 5) input option

  • 6) Enter value = “optionData” the data to be sent to the server after the option is selected

  • 7) Specify that the option is selected by default if selected or selected = “selected” is required. Enter the name you want to appear in the menu.

    <select name = "state" id = "state">
<option value = "Al"> Alabama </option>
<option value = "Ak"> Alsska </option>
<option value = "GS"> GSLYYDS </option>
</select>
Copy the code

8. Let visitors upload files

Sometimes you need to let users of your site upload files (such as photos) to the server. Your resume).

  • 1) Enter form method = “post” encType = “multipart/form-data” encType to ensure that the file is uploaded in the correct format

  • 2) Next, type action = upload.url. Path to the file to upload

  • 3) Enter labels for the file upload area

  • 4) Enter input type = “life” to create a file upload box and a button,

  • 5) Enter id = “idLabel”, enter name = “dataname”, if necessary, set size = “n”

  • 6) Enter multiple or multiple = “multiple” if desired.

    <form method = "POST" action = "xxx.php" encType = "multipart/form-data "> <fieldset> <legend for = "picture"> Picture: </label> <input type = "file" id = "picture" name = "picture" /> </fieldset>Copy the code

9. Create hidden fields

Hidden fields can be used to store data in the form, but they are not displayed to visitors. You can think of them as invisible text boxes that are often used to store previous form collection information so that it can be handed to the script for processing along with the current data. Input type = “hidden”, enter name = “dataname”,value = “data”.

10. Create a submit button

Input information is useless if it is not sent to the server, and you should always create a submit button for the form so visitors can give it to you. Submit buttons can be text. Image or a combination of both.

Enter input type = “submit. If you need to enter value = “submit mesage” the text that will appear on the button.

        <input type = "submit" value = "GSL">
Copy the code

Create a submit button with an image

  • 1) Create PNG, GIF, or JPEG images.

  • 2) Input type = “image”

  • 3) Enter SRC = “image.url”, where image.url is the location of the image on the server.

  • 4) Type Alt = “text”, the text that needs to appear when the image cannot be displayed

    <input type="image" src="xxx.png" width="188" height="95" alt="Create Profile" />
Copy the code

    Create a submit button that combines text and image: Use the Button element to create a button that contains other HTML elements (compatibility issues). Type button Type = “submit”

    <button type = "submit" class = "btn">
<img src = "xxx.png" width = "21" height = "21" alt ="">
Create Profile 
</button>
Copy the code

11. Disable form elements

In some cases, you may not want visitors to use certain parts of the form, such as disabling the submit button until all the required information is complete.

Method: Enter disabled or disabled =” disabled” after the start tag of the form element.

12. Style the form based on the state

You may need to set different styles depending on whether the form state must contain an attribute.

  • : focus Obtains the focus field

  • : Checked radio button or check button,

  • : disabled Indicates the field with the disabled attribute.

  • : Enable is the opposite of disabled.

  • : Required Field with the required attribute

  • A) optional B) required C) optional D) optional

  • : invalid A field whose value does not match the pattern given by the pattern attribute, or is not a valid email tax, URL format, etc.

  • : valid is the opposite of invalid

    <style>
 input : focus{
    background-color : greenyellow;
 }
 textarea : disabled{
   background-color : #ccc;
   border-color : #999;
   color : #666;
  }
</style>
Copy the code