Detailed explanation of HTML form elements (Part 1)

HTML forms are used to collect different types of user input.

HTML forms are used to collect user input;

The form element defines an HTML form.

<form>
    form elements
</form>

Action Attributes

The action attribute defines the action to be performed when the form is submitted.

The common way to submit a form to the server is to use a submit button.

Typically, the form is submitted to a web page on a web server.

If the action attribute is omitted, the action will be set to the current page.

Method property

The method attribute specifies the HTTP method (GET or POST) to use when submitting the form:

When to use GET?

You can use GET (the default method):

If the form submission is passive (such as a search engine query) and contains no sensitive information.
When you use GET, the form data is visible in the page address bar: action.jsp?name=xxxx&sex=female
*ps: GET is best suited for submitting small amounts of data. Your browser will set a capacity limit.

When to use POST?

You should use POST:

If the form is updating data, or contains sensitive information such as passwords.
POST is more secure because the data being submitted is not visible in the page address bar.

HTML forms contain form elements

Form elements refer to different types of input elements, checkboxes, radio buttons, submit buttons, text fields, etc.

The <input> element

The <input> element is the most important form element.

The <input> element has many forms, depending on the type attribute.

-Text input: type="text"

<form>
<label>Username</label>
<input type="text" name="">
</form>

-Submit button: type="submit" (defines the button that submits form data to the form handler)

<form action="action.jsp">
<input type="submit" value="Submit">
</form>
/*Coordinate with action*/
 /*If the value attribute of the submit button is omitted, the button will get the default text, which is the two words "Submit"*/

- Single choice: type="radio"

<form>
<label>Gender</label>
<input type="radio" name="sex" value="male" checked>Male
<br>
<input type="radio" name="sex" value="female">Female
</form> 
/*When the values in name are consistent, the single selection effect can be achieved*/
/*checked means the selected state, you can also write checked="checked"*/

-Checkbox: type="checkbox"

<form>
<label>Hobbies</label>
<input type="checkbox" name="vehicle" value="Sports"><label>Sports</label>
<br>
<input type="checkbox" name="vehicle" value="Beauty"> <label>Beauty</label>
</form>

/*checked means the selected state, you can also write checked="checked"*/

-Define button: type="button"

<form>
<input type="button" onclick="alert('Welcome to 123WORDPRESS.COM!')" value="Click me!">
</form> 

/*Also a normal button*/

- Drop-down list: <select> element

<form>
<select name="cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="fiat">Fiat</option>
    <option value="audi">Audi</option>
</select>
</form> 

The <option> element defines an option to be selected.
Lists usually display the first option as the selected option.
You can define predefined options by adding the selected attribute.

-Textarea: <textarea> element (defines a multi-line input field)

<form>
<textarea name="message" rows="10" cols="30">
Enter the content here!
</textarea>

-Button: <button> element

<form>
<button type="button" onclick="alert('Welcome to 123WORDPRESS.COM!')">Click!</button>

To learn more about the properties of form elements, please click on the link: https://www.jb51.net/web/571879.html

The above is the full content of this article. I hope that the content of this article can bring some help to your study or work. If you have any questions, you can leave a message to communicate. Thank you for your support of 123WORDPRESS.COM!

<<: Solution to the problem of insufficient storage resource pool of Docker server

>>: About Generics of C++ TpeScript Series