Form
Specially used to collect different types of user input. Forms are actually some tags in HTML. All form tags in the browser have a special appearance and default functions.
Format: form element
name attribute (specify the name of the form)
method attribute (specify how to send form data)
The form data can be sent as URL variables (method="get") or HTTP post (method="post").
get method
With the GET method, the browser will establish a connection with the form processing server, and then directly send all the form data in one transmission step: the browser will directly append the data to the action URL of the form. Use a question mark to separate the two.
Suppose you have a very simple form, which contains only the two parameters x and y
x=28&y=66
At any time, we can create a traditional label and use it to call the form with the required parameter values. Its form is as follows:
<a href="http://www.example.com/example/program?x=28&y=66">
But it is possible that the ampersand is used in the transmission, that is, to replace it with " 38;" or "& amp;"
Some servers use; instead.
Therefore, it is suitable for small forms with a few short fields, and there are security issues. The form information is stored in the URL and is easy to intercept.
post method
If the POST method is used, the browser will send data in the following two steps. First, the browser will establish a connection with the form processing server specified in the action attribute. Once the connection is established, the browser will send data to the server in a segmented transmission method.
On the server side, once the POST-style application starts to execute, it should read the parameters from a flag position. Once the parameters are read, they must be decoded before the application can use these form values. The user-specific server clearly specifies how the application should accept these parameters.
action attribute
The required action attribute specifies where to send the form data when the form is submitted.
| value | description |
|---|---|
| URL | Where to send form data. Possible values: Absolute URL-pointing to other sites (such as src="www.example.com/example.htm") Relative URL-pointing to files within the site (such as src="example.htm") |
Common form elements
input tag
size attribute
Used to define the display size of this area
maxlength attribute
Used to define the maximum number of characters
value attribute
Used to define the default value,
<p>用户名:</p><input type="password" name="email" size="40px" maxlength="10" value="2226298119"/>
type attribute
text type (plain text input box)
Define a single-line input field where the user can enter text. The default width is 20 characters.
<p>Email:</p><input type="text" name="email" size="40px" maxlength="10"/>
password type (encrypted text input box)
User input will be replaced by * or black dots.
<P>密码:</P><input type="password" name="pin" size="40" maxlength="15"/>
radio type (single selection box)
The radio button in the HTML form, each time it appears in the HTML form, a Radio object will be created.
By default, radio buttons are not mutually exclusive (you can choose more than one). If you want to be mutually exclusive, you need to add a name attribute to each button, and the value of the name attribute is the same .
<p>性别</p><input type="radio" name="sex">男
<input type="radio" name="sex">女
Use the checked attribute to determine whether a radio button is selected in its default state. If multiple radio buttons are checked, only the last one takes effect.
p>性别</p><input type="radio" name="sex" checked>男
In HTML, if the attribute is the same as the value, you can omit the value and write it directly, such as the above
checked="checked"
checkbox type (checkbox)
The Checkbox object represents a select box in an HTML form.
Each time it appears in the HTML document, the Checkbox object is created.
<p></p>
<input type="checkbox" checked="checked"> 我已阅读
<br>
<input type="checkbox" > 同意并且加入
file type (file)
Each time a tag appears in an HTML document, a FileUpload object is created.
This element contains a text input field for entering the file name, and a button for opening the file selection dialog box for graphically selecting files.
<p>上传照片</p><input type="file">
submit type (submit button)
Define the submit button. The submit button will send the form data to the server. The default content of the button submits the query, and the value changes the button prompt content
<input type="submit" value="">
image type
Use an image instead of the submit button. The source file of the image is specified by the src attribute, and the src attribute and the alt attribute must be used in combination.
<input type="image" src="up.jpg" alt="submit">
hidden type (hidden domain)
Define hidden fields. Hidden fields are not visible to users. Hidden fields usually store a default value, and their value can also be modified by JavaScript.
<input type="hidden" name="country" value="Norway" />
reset type (reset button)
Define the reset button. The reset button will clear all data in the form.
<input type="reset" />
onclick attribute
A mouse click on the element triggers an event. Use with custom functions in javascript
<script type="text/javascript">
function fun(){
alert("提交成功");
}
<p></p><input type="submit" value="提交" onclick="fun()">