Front-End Basics: HTML tags (bottom)

Front-end Base HTML tags (bottom)

1. Forms

• The functionality of the form is primarily used to transfer data to the server, enabling the client to interact with the Web server. The form can contain input series labels such as text fields, checkboxes, radio buttons, submit buttons, etc., and the form also contains textarea, select, and label labels;
• Properties of the form:action, submits the form data to a program on the specified server, the program receives the data submitted by the form (i.e., form data) to do the corresponding processing, such as: https://baidu.com;**method**, form submission method get/ Post/update, the default is get;

Attention

  from form: Implementing user interaction with the Web server in the form of a key-value pair {"": "Intelligence", "": "123"} If you do not have the name attribute, your data is not past the name: The key name requests the server-side way: Get: The request is placed behind the URL Username=unknown&password =123 post: The request is placed in the request body about the URL content url:https://www.baidu.com (protocol: domain name (also ip+ port)) Url:http:127.0.0.1:8800/blog/addblog (protocol: IP: Port/) Url:http:127.0.0.1:8800/blog/addblog?username = unknown h    TTP: Protocol 127.0.0.1:8800:IP address and Port Blog/addblog:url path (path) Username = Yuan:get Request Data Request protocol: Browser to server (GET request, POST request) Format: request header for first line: is a set of group key values \n,\n\r request data: There are two ways if Get:url?data if Pos T: Request data GET request: poor security, limited amount of data (GET request when design to query) those are get requests (typically query database operations): 1.url Ask server Side 2. Hyperlink access, a tag POST request: Relative to get security point, but not absolute security (fix can be used post)  

• table cell : HTML forms are more complex parts of HTML tags, and forms are often combined with features such as scripting, dynamic pages, data processing, and so on, so it is an important part of making dynamic Web sites. Forms are generally used to collect user input information, and how it works: When a user accesses a page with a form, they can fill in the necessary information and then click on a button to submit. This information is transmitted over the Internet to the server, the server has a special program to process the data, if there are errors will return error message, and ask to correct the error, but the data is complete and correct, the server to make appropriate feedback;

<input> Series Labels

<1> 表单类型type:     text 文本输入框             password 密码输入框             radio 单选框             checkbox 多选框               submit 提交按钮                         button 按钮(需要配合js使用.) button和submit的区别？             file 提交文件：form表单需要加上属性enctype="multipart/form-data"                         上传文件注意两点：                请求方式必须是post                enctype="multipart/form-data"             <2> 表单属性 name:    表单提交项的键.           注意和id属性的区别：name属性是和服务器通信时使用的名称；           而id属性是浏览器端使用的名称，该属性主要是为了方便客户端编程，而在css和javascript中使用的value:      表单提交项的值.对于不同的输入类型，value 属性的用法也不同：                type="button", "reset", "submit" - 定义按钮上的显示的文本                                 type="text", "password", "hidden" - 定义输入字段的初始值                                 type="checkbox", "radio", "image" - 定义与输入相关联的值checked:  radio 和 checkbox 默认被选中readonly: 只读. text 和 passworddisabled: 对所用input都好使.

<select> tags

 <select>          下拉框标签属性          name：表单提交项的键.          size：选项个数          multiple：multiple                  <optgroup>为每一项加上分组                 <option> 下拉选中的每一项 属性：                       value：表单提交项的值.                          selected：selected下拉选默认被选中

<textarea> tags

<form id="101" name="form" method="post" action="">        <textarea cols=“宽度” rows=“高度” name=“名称”>                   默认内容        </textarea></form>

<label> tags
The <label> tag defines the tag for the input tag:

• Label labels do not present any special effects to the user;
• The value of the for property of a label label should be the same as the id attribute value of the related element;

<form method="post" action="">        <label for=“username”>用户名</label>        <input type=“text” name=“customer” id=“username” size=“20” /></form>

<fieldset> tags

<fieldset>    <legend>登录吧</legend>    <input type="text"></fieldset>

Label Instance 1

<! DOCTYPE html>

Tag Instance 2

<! DOCTYPE html>

Front-End Basics: HTML tags (bottom)