Home >Web Front-end >HTML Tutorial >html journey input field control_html/css_WEB-ITnose
html journey input field control_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:49:051401browse
In the learning of html, we will encounter many controls. There is a type of control called an input field, which can carry data entered by the user, and can also change the data transmission method or its own style through HTML.
We can divide this type of control into three subcategories according to their properties: text type, button type, and selection type:
We can express the corresponding relationship between each type of control and VB control as:
1. Text type
This type of control is presented in the form of text, and can directly carry the text data input by the user and then transmit it.
1.form: form
The main attributes are: action, method (get and post), type, name.
PS: The difference between get and post
1. Get is to obtain data from the server, and post is to transmit data to the server.
2. Get adds the parameter data queue to the URL pointed to by the ACTION attribute of the submitted form. The value corresponds to each field in the form and can be seen in the URL. Post uses the HTTP post mechanism to place each field in the form and its content in the HTML HEADER and transmit it to the URL address pointed to by the ACTION attribute. Especially when the hyperlink jumps, the get method will load the corresponding URL address directly to the URL of the current page to form a string connection. The post process will directly jump to the page, and the URL in the address bar will not change in any way, so the user cannot see this process.
3. For the get method, the server uses Request.QueryString to obtain the value of the variable. For the post method, the server uses Request.Form to obtain the submitted data.
4. Get security is very low, post security is high. But the execution efficiency is better than the Post method.
2.text: text box
In this control, we can uniquely identify the control by id, set the name of the control by name, and set the value of the control by value (default or display value), size sets the length of the text box, and maxsize sets the maximum length. The following uses a piece of code to summarize the acceptance:
<span style="font-size:18px;"><html> <head> <title>演示text输入域</title> <!--设置该界面显示的标题 --> </head> <body> <h1>演示text</h1> <hr> <form action ="12.html" method="get"> 姓名：<input type="text"> <br> <!--默认类型为文本框，也可设置为text型 --> 年龄：<input type="text" name="age"><br> <input type="submit" value="保存"> </form> </body></html></span>Note: When our text box is a password item, we need to set the corresponding attributes so that the password is not displayed in the original code:
3.textarea: Text description field
Its shape and function are similar to the listBox control, which can store a large amount of text data, and textarea can set the row and column values through the attributes of rows and cols List.
2. Button type
1.reset
It is also the "clear" button used in our VB program, and the clearing effect that needs to be achieved in the past is in html Just the setting of the type attribute:
<span style="font-size:18px;"> <input type="submit" value="保存(submit)"><br> <!--提交按钮--> <input type="button" value="保存（button）"><br> <!--普通按钮--> <input type="reset" value="保存（reset）"><br> <!--重置类的按钮--> <input type="image" src=""> <!--图片按钮--></span>These four button controls are all implemented through the setting of the type attribute. The image is the same as the image control in VB. The one with type="button" is the most common button.
3. Selection type
1.radio: radio button
The premise of radio button implementation is that all radio button names are consistent, otherwise they will It has the same effect as the multi-select box.
2.checkBox: Check box
3.selected
This is the drop-down list control, which is the combox control used in vs. By default, we can only select one of the drop-down items, but when we set the multiple attribute we can achieve the effect of multiple selections:
<span style="font-size:18px;"> <select name="language" multiple > <option value="01">C语言</option> <option value="02">VB</option> <option value="03">C#</option> <option value="04">delphi</option> </select></span>
Although html is knowledge in BS, and VB is the "old knowledge" learned when I first entered school, html can be regarded as a derivative of VB: by changing individual attribute controls The same effect can be achieved.