Form Tag Element and form tag

Form Tag Element and form tag

Purpose:

Provides users with an interface (Front-End Interface) that allows users to fill in relevant information and collect, classify, and interact with user-submitted information.

Form workflow:

1. Enter data on the page with a form

2. submit the data to the backend (. php) such as uli. php.

3. the backend (. php) receives the data for verification. If the verification succeeds, the data is written to the database or read from the database, and then returned to the client.

Syntax format:

<Form attribute = "attribute value">

<Input type = "type">

</Form>

Common attributes:

1. action is used to set the form data processing page (. php)

2. method is used to set the submission method. There are two methods:

Default get Method

Features:

All data will be transmitted in the form of an organization's fame Value Pair using a url.

Insecure

The transferred data type is single

Small amount of data transferred

Post

Features:

All data will be transmitted in the form of an organization's fame value pair within the Protocol.

Relatively secure

Diverse data types passed

Large amount of data transferred

3. enctype is used to set the data transmission mode (optional) (This attribute is valid only when the method attribute is set to post)

Valid value:

1. application/x-www-form-urlencode (this option is used by default and can be left unspecified) is used to transmit text data.

2. multipart/form-data: if the form contains the control for file Upload (input type = "file"), the attribute value must be set to multipart/form-data.

Form Element

Is to provide users with an input area.

Input type control

Type: set different types of form elements (input area)

 

Valid value:

 

 

 

Drop-down list

<Select>

<Option> </option>

<Option> </option>

<Option> </option>

</Select>

Note: If you want to change the default option, add an attribute value for option above this option and set it to selected = 'selected'

<Textarea> </textarea> text field:

Cols: sets the number of merged columns to control the width of the text field.

Rows: sets the number of merged rows to control the height of the text field.

Disabled: property value: disabled. If this value is set, multi-line text fields are disabled:

Label:

We can bind the text prompt information with the input box of our form control into a whole. When we click the content of the text section, the default information we prefill in the prompt box will be selected accordingly,

Label triggers the Form Control next to the text.

Label can be seen as a container

Statement 1:

<Form>

<Lable for = "attribute value of id attribute of input form"> enter the User name: <lable>

<Input type = "text" name = "username" id = "username" value = "Enter the user name"/>

</Form>

Statement 2:

<Label> enter the User name: <input type = "text" name = "username" value = "Enter the user name"/>

<Label>