Html notes (7) form_html/css_WEB-ITnose

Form tag:

The form tag is the most commonly used tag and is used for interaction with the server side.

: 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 button

: 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.

: 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.

: Multi-line text box, such as: personal information description.

: 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