IT Course HTML Basics 013_Forms and User Input

Forms

HTML Forms are a very important part of HTML, allowing users to input information on web pages and submit it to the server.

Example:

1
<form action="/submit" method="post">
2
  <!-- Form elements go here -->
3
</form>

The <form> element defines the area where users input data, and can contain different types of input elements such as text areas <textarea>, dropdown lists <select>, radio buttons <radio>, checkboxes <checkbox>, and buttons <button>.

Form Attributes:

• action: Defines the URL of the file that processes form data after submission to the server.
• method: Defines the HTTP method used to send data to the server. Common values are “get” and “post”.
• name: Used to specify the form name. The form name identifies the form and is used when processing form data on the server side.
• enctype: Used to specify the encoding method for form data. Form data can use application/x-www-form-urlencoded or multipart/form-data encoding.
• autocomplete: Used to specify whether to enable form autocomplete. If set to on, the browser will automatically fill in previously entered data in the form.
• novalidate: Used to specify whether to validate form data. If set to on, form data will not be validated before submission.

[!Summary]

• The form itself is not visible.

Text Fields

In forms, we often need users to input text content such as letters and numbers. This can be done with the <input> element with its type attribute set to “text”.

Example:

1
<form>
2
Name: <input type="text" name="name"><br>
3
Age: <input type="text" name="age">
4
</form>

Effect:

[!Summary]

• In most browsers, the default width of a text field is 20 characters.

Password Fields

If you need users to input a password, set the type attribute of the <input> element to “password”, and the input content will be hidden.

Example:

1
<form>
2
Password: <input type="password" name="pwd">
3
</form>

Effect:

[!Summary]

• Password field characters are not displayed in plain text but replaced with asterisks * or dots .

Radio Buttons

Radio buttons and checkboxes allow users to select one or more options from multiple choices. The type attribute value for radio buttons is “radio”.

Example:

1
<form action="">
2
Gender:
3
<input type="radio" name="sex" value="male" checked>Male
4
<input type="radio" name="sex" value="female">Female
5
</form>

Effect:

[!Summary]

• Radio button name attribute values must be the same, otherwise they won’t belong to the same group.
• The checked attribute is used to specify whether a radio button is selected by default.

Checkboxes

Checkboxes allow selecting one or more options, defined using <input type="checkbox">

Example:

1
<form>
2
  Apps you have used:
3
  <input type="checkbox" name="app" value="jd">JD
4
  <input type="checkbox" name="app" value="wechat">WeChat
5
  <input type="checkbox" name="app" value="qq">QQ
6
  <input type="checkbox" name="app" value="douyin">TikTok
7
</form>

Effect:

[!Summary]

• The checked attribute is used to specify whether a checkbox is selected by default.

Dropdown Lists (select)

Dropdown lists allow users to select one option from multiple choices. They are created with the <select> element and use <option> elements to define options.

Example:

1
<form action="">
2
  Please select your country:
3
  <select name="country">
4
    <option value="china">China</option>
5
    <option value="us">USA</option>
6
    <option value="japan">Japan</option>
7
  </select>
8
</form>

Effect:

[!Summary]

• The selected attribute is used to specify the default option in the dropdown list.
• The disabled attribute is used to specify whether the dropdown list is available.
• You can use the size attribute to specify the number of visible options in the dropdown list.

Submit Buttons (Submit, Reset, Button)

Forms usually need a button to submit or confirm user input. submit, reset, and button are all form button elements in HTML.

Example:

1
<form action="/submit" method="post">
2
  <input type="submit" value="Submit Button">
3
  <input type="reset" value="Reset Button">
4
  <button type="button" value="Confirm Button">Confirm Button</button>
5
  <input type="image" src="[zhaojian-avatar.png (1332×1332)](https://www.zhaojian.net/images/zhaojian-avatar.png)" alt="Image Button" width="50" height="50">
6
</form>

Effect:

[!Summary]

• post: Refers to the HTTP POST method, form data is included in the form body and then sent to the server, used for submitting sensitive data such as usernames and passwords.
• get: Default value, refers to the HTTP GET method, form data is appended to the URL in the action attribute with ? as the separator, generally used for non-sensitive information like pagination. Example: https://www.zhaojian.net/?page=1, where page=1 is the data submitted via the get method.

Form Elements and Attributes