day 45

Form day 45 form selector

01. form Form

1. Forms can get user input form (text, select, uploaded files), and the contents of the input passed to the back-end

2. parameter

   1. action control address data submitted

      Three kinds of ways to write

      1. Do not write the address of the current default data submitted towards this page is located
      2. Write full path ( https://www.baidu.com )
      3. Write only the path suffix (/ index /) will automatically be spliced ​​current address

   2. Way method to control the data submitted

      1. get form the default form to send get request
      2. post

3. input label

   To use the label together under normal conditions

   <label for='d1'>文本<input type='text' id='d1'></label>
   绑定id值之后点击label标签内的任何位置都自动选中input框
   <label for="d2">用户名:</label>
   <input type="text" id="d2"> 两者效果相同

   form form of input to show different functions in different types of type

   Value of the type property	Manifestations	Code corresponding
   text	Single-line text input	<input type="text" />
   password	Password input box	<input type="password" />
   date	Date input box	<input type="date" />
   checkbox	Check box	<input type="checkbox" checked="checked" />
   radio	Single box	<input type="radio" />
   submit	Submit button	<input type="submit" value="提交" />
   reset	Reset button	<input type="reset" value="重置" />
   button	Push button	<input type="button" value="普通按钮" />
   hidden	Hidden input box	<input type="hidden" />
   file	Text selection box	<input type="file" />

   disable input tag can be added to the input block property is disabled

   The input tag value attribute may be added to set default values

   Tags selected by the select key to set the default checkbox checked = 'checked' when the attribute names and values ​​are the same attribute name only can be written

   All labels get user input should have a name attribute

   key attribute name is similar to a dictionary, input box acquired user input are input into the block value attribute

   If you want to form a form submission data, the following parameters must be modified

   enctype="multipart/form-data"

4. select the drop-down box label

   One option is to label one option

   The default is radio, you can make it into a multiple parameter by adding multiple choice

   <select name='city' multiple>
     <option value="sh">上海</option>
     <option value="bj">北京</option>
     <option value="sz">深圳</option>
   </select>
   标签内的信息是显示给用户看到value的值才是返回给后端的真实值

5. textarea tag to obtain a large section of the text

   <textarea name='info' id='12' cols='100' rows='30'></textarea>

02. css

Cascading Style Sheets, label style for controlling html

Note/*单行注释*/

Usually alone when writing code written in a css css file, there is only css code

/*导航条样式*/

/*通用样式*/

/*轮播图样式*/

1. The grammatical structure of css

   选择器 {属性1:属性值1}

2. Three ways to introduce css

   1. By introducing external link tags css files (the most formal usage)

      <link rel='stylesheet' href='css文件路径'>

   2. Directly in the head on the html page css code by direct writing style tag

      <style>
        h1{
          color:green;
        }
      </style>

   3. Inline style (style attribute directly written directly by the internal label) is not recommended

      <h1 style='color:rad;'>
        展示内容
      </h1>

3. Find css

   1. The basic selector

      1. Element selector
      2. id selector
      3. Class selector
      4. Universal selector

   2. Combination selector

      1. div internal span all
      2. div> span internal layer
      3. div ~ span following peer
      4. div ~ span immediately following similar

   3. Attribute selectors

      Any default tab has its own attributes id class

      Tag also supports you to customize any number of attributes (which means allowing label to help you carry some extra data)

   4. Pseudo class selector

      a tag has four states

      1. link is not clicked
      2. hover the mouse was suspended in the above
      3. Click on the active grimdeath
      4. After clicking visited

      We will input the state after box into mouse called the input gain focus focus focus

      State after the input frame is called out mouse loses focus

   5. Pseudo-element selectors (remove the negative impact caused by floating)

      You can add text by css

   6. Selector priority

      1. Introducing the same in different ways in the case of the selector

         Follow the principle of proximity, who follow on from the past who label rendering

      2. Where different selector

         The row selector> id selector (second)> class selector (most common)> selector element