Form 1113 form with css selector

1.form form

Can get user input (input, select, uploaded files)

And the user input is sent to all of the rear end

HTML使用表单向服务器提交请求,表单、表单控件的主要作用就是收集用户输入,当用户提交表单时,用户输入内容将被作为请求参数提交到远程服务器。

form elements

Form元素用于生成输入表单,是一个非可视化结构,所有需要向服务器提交请求的数据都需要放在Form所包含的表单控件中。(每个有name属性的表单控件对应一个请求参数,没有name属性的表单控件不会生成请求参数。拥有共同name的控件为一组,只生成一个请求参数,但该参数有多个值。)

Feature

  • Action can trigger form submission data form, there are two labels can**********
input标签type=submit
button标签
  • All labels get user input should have a name attribute**********
name属性就类似于字典的key
input框获取到的用户输入都会放到input框的value属性中
  • Select the data for the back end of the box spread is determined by the value attribute

  • To form form data submissions must modify the following parameters enctype = "multipart / form-data"

parameter

  • action control address data submitted
三种书写方式
    1.不写 默认就是朝当前这个页面所在的地址提交数据
    2.写全路径("完整的url网址")
    3.只写路径后缀(/index/)

img

  • Way method to control the data submitted
get请求 
    from表单默认的是get请求,携带的数据默认跟在url后面,也就是"?"后面
    
post请求
    数据以键值对在http请求体重发送给服务器

*********************************************************

1、get:表单数据会被encodeURIComponent后以参数的形式:name1=value1&name2=value2 附带在url?后面,再发送给服务器,并在url中显示出来。

2、post:enctype 默认"application/x-www-form-urlencoded"对表单数据进行编码,数据以键值对在http请求体重发送给服务器;如果enctype 属性为"multipart/form-data",则以消息的形式发送给服务器。

img

  • name: the name of the form
  • target: Specifies the manner in which open url
(提交请求会打开另一个URL资源)。_blank、_parent、_self、_top。

Control elements in the form

1.input use

Normally input label used in combination with the required

img

<label for="d1">用户名:<input type="text" id="d1"></label>
绑定id值 之后点击label标签内任何的位置都可以自动选中input框

img

  1. Single-line text box: type attribute is text.
  2. Password input box: type attribute for the password.
  3. Date selector: type to date.
  4. Hidden fields: type attribute is hidden.
  5. Single-box: type attribute is radio. (Name of the same value of the same group.)
  6. Box: type attribute is checkbox.
  7. File upload fields: type attribute to file. (Equivalent to the graphic version of the submission.)
  8. Submit: type attribute to submit.
  9. Reset: type attribute is reset.
  10. No action buttons: type attribute button.
  11. Color Picker: type is color.
  12. Drag bar: type for the range. In this case, input may select min (minimum drag bar), max (maximum drag bar), step (step).
  13. Search input box: type to search.

img

  1. Property checked: Set single box, if the initial state of the check box is selected.
  2. Properties disable disable the input box
  3. Property value set the default value

img

input标签可以加disable属性 禁用该input框
        input标签可以加value属性   设置默认值
        选择的标签 如何默认选中
            radio
            checkbox
                checked='checked'
                当属性名和属性值相同的时候 可以只写属性名(******)

img

图像域:type属性为image。
属性 maxlength:指定文本框所允许输入最大字符数。
属性 readonly:指定只读。
属性 src、width、height:指定图像URL、宽、高。(type为image时)。
    
//(以下为HTML5新增type)
时间选择器:type为time.
本地日期、时间选择器:datetime-local。
周选择:type为week。
月份选择器:type为month。
E-mail输入框:type为email。
电话号码输入框:type为tel。
URL输入框:type为url。
只能输入数值的文本框:type为number。

2.select label

Elements to create a list box or drop-down menu (as long as the select element specifies the size or multiple elements generates a list box) option is the one option: a list item or menu item.

  • select property multiple: list boxes and drop-down menu whether to allow multiple selections.
  • select property size: list box to specify how many list items can be displayed simultaneously.
  • select sub-elements option: Item
select子元素 optgroup:将option项分组。
option属性 disabled:禁用该选项。
option属性 selected:指定初始状态是否被选中。
option属性 value:该项的请求参数值。
optgroup属性 label:指定该组标签。必填
optgroup属性 disabled:禁用该选项组。

img

3.textarea element

For generating a multiline text field, obtain a large segment of text

属性cols:指定文本域宽度
属性rows:指定文本域高度
disabled:禁用文本域
readonly:只读
maxlength:设置文本域最多可以输入的字符数。
wrap:指定多行文本域是否添加换行符。如果不添加换行符,那么请求参数将会舍弃文本域的格式,只保留文本发送到URL。如果文本较多且格式较复杂,应指定wrap属性。

img

4.autofocus property

After the form increase this property, the page is loaded after the control has the focus, so the property can only have one property set.

2.CSS

CSS means Cascading Style Sheets (Cascading Style Sheets), by introducing a style sheet, thus greatly improving the work efficiency.

1. basic grammar

CSS rule consists of two main parts: a selector, and one or more declarations

css的语法结构   选择器 {属性1:属性值1}

HTML element id and class are two basic public property.

  • (1) a plurality of class labels can be defined at the same time;
  • (2) id can also be written name, that name is the difference in standard HTML, XHTML and id is the standard, now are using standard web id, so we try not to use the name attribute;

css comment

单行 /*这里是单行注释*/

多行
    /*这里是多行
    注释
    */

2.css three reference

There are three ways the introduction of CSS in HTML

2.1 Waibuyangshibiao

Waibuyangshibiao is the ideal reference CSS, the HTML and CSS code in a different code files individually, then the link tag in an HTML document to reference CSS stylesheet.

<link rel="stylesheet" href="样式表.css">

Note: Waibuyangshibiao link tag is used in reference to the head tag.

2.2 Internal Style Sheet

Internal style, refers to the CSS code and HTML code in the same file, which the CSS code in

Guess you like

Origin www.cnblogs.com/fwzzz/p/11853856.html