Community Learn Tools Library Leisure
search
English
Home > Web Front-end > HTML Tutorial > body text

Basic html tutorial on interacting with viewers, form tags

零下一度
Release： 2017-05-12 13:57:01
Original
1505 people have browsed it

1. Use form tags to interact with users

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>表单标签</title>
 6 </head>
 7 <body>
 8 <form>
 9       <label for="username">用户名:</label>
10       <input type="text"  name="username" id="username" value="" />
11       <label for="pass">密码:</label>
12       <input type="password"  name="pass" id="pass" value="" />    
13       <input type="submit" value="确定"  name="submit" />
14       <input type="reset" value="重置" name="reset" />
15 </form>  
16 </body>
17 </html>
Copy after login

How does the website interact with users? The answer is to use HTML form(form). The form can transmit the data entered by the viewer to the server, so that the server-side program can process the data passed by the form.

Grammar: 

<form method="传送方式" action="服务器文件">
Copy after login

Explanation:

1.

: tags appear in pairs, starting with and ending with < ;/form>End.

2.action: The place where the data entered by the viewer is sent, such as a PHP page (save.php).

3.method: Data transmission method (get/post). post is encrypted transmission; get is address bar transmission, that is, unencrypted transmission. 

<form    method="post"   action="save.php">
        <label for="username">用户名:</label>
        <input type="text" name="username" />
        <label for="pass">密码:</label>
        <input type="password" name="pass" />
</form>
Copy after login

Note:

1. All form controls (text box, text field, button , radio button, check Box , etc.) must be placed between the

tags (otherwise the information entered by the user may not be submitted to the server!).

2. Method: The difference between post/get. This part is a matter for back-end programmers to consider.

Give it a try: Add code to the

tag on line 8 in Editor: 

method="post" action="save.php"
Copy after login

Did you enter code like the following:

Basic html tutorial on interacting with viewers, form tags

text: Text box password: Password box raido: Radio button checkbox: Check box file: File selection box submit: Submit button

When you click on the text in the label, you can associate the text with the control. Use the "for" attribute to tie the label to another element. The "for" attribute value should be related to the related element. The "id" attribute values ​​are the same.

2. Text input box, password input box

 1 
 2 
 3 
 4 
 5 文本输入框、密码输入框
 6 
 7 
 8 
 9     账户: 
10     
11     

12     密码: 
13 
14  
15 
16
Copy after login

When the user wants to type letters, numbers, etc. in the form, the text input box will be used. The text box can also be converted into a password input box.

Grammar: 

<form>
   <input type="text/password" name="名称" value="文本" />
</form>
Copy after login

1, type:

When type="text", the input box is a text input box;

When type=" password", the input box is the password input box.

2. name: Name the text box for use by background programs ASP and PHP.

3. value: Set the default value for the text input box. (Generally used as a prompt)

Example: 

<form>
  姓名：
  <input type="text" name="myName">
  <br/>
  密码：
  <input type="password" name="pass">
</form>
Copy after login

Results displayed in the browser:

Basic html tutorial on interacting with viewers, form tags

Try it: Insert name and password input boxes into the form

1. Enter the code on line 10 in the editor: 

<input  type="text"  name="myName" />
Copy after login

2. Enter the code on line 13 of the editor: 

<input  type="password"  name="pass" />
Copy after login

At least one space between attributes.

hidden Define a hidden input field
image Define an image as a submit button
number Define a numeric field with a spinner control
password Define the password field. Characters in the field will be masked
radio Define the radio button
range Define the numeric field with a slider control
reset Define the reset button. The reset button will reset all form fields to their initial values ​​
search Define the text field used for search
submit Define the submit button. The submit button sends data to the server
text Default. Define a single-line input field where users can enter text. The default is 20 characters
url defines the text field used for URL

Some people actually say that value is rarely used now. I guess beginners don’t know that placeholder is a new attribute of H5, and it is from IE6 to IE9. Native placeholder is not supported.

If you just use placeholder without solving the compatibility problem (you have to add a long section of compatibility code to use placeholder), it can only be said that you are just looking around, not working.

(The red words are the content of the comment area, some of which are temporarily incomprehensible)

3. Text field, supports multi-line text input

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>文本域</title>
 6 </head>
 7 <body>
 8 <form action="save.php" method="post" >
 9     <label>个人简介：</label>
10     <textarea>在这里输入内容...</textarea>
11     <input type="submit" value="确定"  name="submit" />
12     <input type="reset" value="重置"  name="reset" />
13 </form> 
14 </body>
15 </html>
Copy after login

When the user needs to enter the form in the form When entering large blocks of text, you need to use text input fields.

Grammar: 

<textarea  rows="行数" cols="列数">文本</textarea>
Copy after login

1. .

2. cols: The number of columns in the multi-line input field.

3. rows: The number of rows in the multi-line input field.

4. You can enter a default value between the tags.

Example:
Copy after login

Display the results in the browser:

Basic html tutorial on interacting with viewers, form tags

注意这两个属性可用css样式的width和height来代替：col用width、row用height来代替。

来试一试：修改文本域的列数和行数

在编辑器中第10行