Home >Web Front-end >HTML Tutorial >Html notes (7) form_html/css_WEB-ITnose
Html notes (7) form_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:34:21984browse
Form tag: ff9c23ada1bcecdd1a0fb5d5a0f18437
The form tag is the most commonly used tag and is used for interaction with the server side.
d5fd7aea971a85678ba271703566ebfd: Input tag; accept user input information
The type attribute specifies the type of input tag
Text box text: The input text information is displayed directly in the box. Password box password: The entered text is displayed in the form of dots or model numbers. Radio button radio: such as: gender selection. Checkbox checkbox: Such as: interest selection. Hidden field hidden: Not displayed on the page, but submitted with other content when submitted. Submit button submit: used to submit the content in the form. Reset button reset: Set the content filled in the form to the initial value Button button: You can customize events for it. File upload file: Later expanded content will automatically generate a text box and a button. Image image It can replace the submit button221f08282418e2996498697df914ce4e: select label to provide users with content selection. For example: the province where the user is located. The size attribute is the number of displayed items.
5a07473c87748fb1bf73f23d45547ab8: sub-item label, the attribute selected has no attribute value, and is added to the sub-item. On one of the sub-items, the sub-item becomes the default selected option.
4750256ae76b6b9d804861d8f69e79d3: Multi-line text box, such as: personal information description.
2e1cf0710519d5598b1f0f14c36ba674: used to define shortcut keys for each element.
for attribute: Specify the form element that the shortcut key works on. Must be the same as the id value of the form element to be applied.
accesskey attribute: Specify the shortcut key. This shortcut key needs to be used in combination with the alt key.
Example:
<p class="sycode"> 1 < tr > 2 < td >< label accesskey ="u" for ="userid" > 用户名 </ td > 3 < td >< input type ="text" name ="user" id ="userid" /></ td > 4 </ tr > </p>
Form submission:
First define the action attribute value in the form form and specify the destination for form data submission (server) . Specify the submission method by specifying the method attribute value. If not defined, the value of method defaults to get.
The difference between the two most commonly used submission methods, get and post:
Get submission displays data in the address bar, which is not safe for sensitive information. Post submissions are not displayed in the address bar. The data stored in the address bar is limited, so the get method has limits on the volume of data submitted. Post can submit large volumes of data. The submitted data is encapsulated in different ways: get: The submitted data is encapsulated in front of the message header and in the request line. post: Encapsulate the submitted data into the data body after the message header. Note: Usually forms are submitted using post because coding is convenient. For the Tomcat server, the default decoding method is ISO8859-1, so Chinese characters will appear garbled. Submitted through post, you can use request.setCharcterEncoding("GBK"); to solve the garbled problem. This method is only valid for the data body. If it is submitted by get, request.setCharcterEncoding("GBK"); cannot solve the garbled problem and must be performed first. ISO8859-1 encoding, and then GBK decoding. Although this method is also suitable for garbled characters submitted by post, it is troublesome, so it is recommended to use post for form submission.Example:
<p class="sycode"> 1 < fieldset > 2 < legend > 注册区域 </ legend > 3 < form action ="http://127.0.0.1:8888" method ="post" > 4 < table border ="5" width ="75%" cellpadding ="10" cellspacing ="0" bordercolor ="#3399FF" > 5 < tr > 6 < td colspan ="2" align ="center" >< b > 信息注册页面 </ b ></ td > 7 </ tr > 8 9 < tr > 10 < td >< label accesskey ="u" for ="userid" > 用户名 </ td > 11 < td >< input type ="text" name ="user" id ="userid" /></ td > 12 </ tr > 13 < tr > 14 < td > 密码 </ td > 15 < td >< input type ="password" name ="passwd" /></ td > 16 </ tr > 17 < tr > 18 < td > 确定密码 </ td > 19 < td >< input type ="password" name ="passwd_conform" /></ td > 20 </ tr > 21 < tr > 22 < td > 性别 </ td > 23 < td > 24 < input type ="radio" name ="sex" value ="man" /> 男 25 < input type ="radio" name ="sex" value ="woman" /> 女 26 </ td > 27 </ tr > 28 < tr > 29 < td > 技术 </ td > 30 < td > 31 < input type ="checkbox" name ="tech" value ="java" /> Java 32 < input type ="checkbox" name ="tech" value ="jsp" /> Jsp 33 < input type ="checkbox" name ="tech" value ="servlet" /> Servlet 34 </ td > 35 </ tr > 36 < tr > 37 < td > 国家 </ td > 38 < td > 39 < select name ="country" > 40 < option > --选择国家-- </ option > 41 < option value ="cn" > 中国 </ option > 42 < option value ="en" > 英国 </ option > 43 < option value ="usa" > 美国 </ option > 44 </ select > 45 </ td > 46 </ tr > 47 < tr > 48 < td colspan ="2" align ="center" > 49 < input type ="submit" value ="submit" /> 50 < input type ="reset" value ="reset" /> 51 </ td > 52 </ tr > 53 54 </ table > 55 </ form > 56 </ fieldset > </p>
Security issues:
Violent submission, violent registration
<p class="sycode"> 1 < a href =”http://注册地址?name=value&id=value......” > 暴力开始 </ a > </p>
Super By default, the link is submitted in the get method
The client first performs data validity verification, and the server must verify the data submitted by the client again