"Front-end" HTML Basic knowledge form

HTML form

The label of the form is <form>, which is used to submit data to the background of the Web site. The submitted data format was originally not quite clear, in the Python flask framework, the data I get from the form is a dictionary (flask.request.form) from which you can get the data submitted in the form. The key of the dictionary is the value of the Name property of each form element, and the value is the user's input.

<form>

The form itself has some properties, such as the action specifies a URL that is processed by the program specified by the URL when the data in the form is submitted. This specified program can be a. php script file, or it can be a path handler in the Flask framework, for example. Other properties include:

ACTION specifies a program to handle the

METHOD specifies how to submit this form, optional post,get, etc.

Target specifies the destination of the URL in the action

Name specifies the names of a form

Wait a minute

<input>

Many of the basic form components are input tags, unlike the values of their type properties. The value of the type attribute determines exactly what the form element is. Like what:

<input type= "text" value= "Default_text" name= "Test_text" maxlength= "set input maximum Length" size= "set itself input box length"/> A clear text input box, The default value is Default_text

<input type= "Password" name= "test_passwd" maxlength= "..." size= "/> A password input box

<input type= "Submit" value= "button to display the text" name= "Test_submit"/> A Submit button, press the Submit button to submit the entire form of data to the server, and submit similar, If type is a reset, it's a clear button.

<input type= "Radio" name= "group1" value= "radio_info" Checked>some label text</input> a single option for multiple single options, All of the same name belong to the same group, all the options for a group can only have one selected, value is the values of that single option when submitting data, checked identifies that option is selected, and if more than one radio in the same group has checked, the last set is whichever. If a radio is not selected, it will not pass the key value of this element to the back end.

<input type= "checkbox" Name= "Group2" value= "check_info" checked>some label text</input> a check box, properties and radio are similar, But there is no one group can only choose one, the Value property writes some information, as the check box element values are submitted along with other data to the backend. Without a choice, no data is transmitted.

<input type= "number" name= "Quantity" min= "1" max= "5" > A digital input box, you can set minimum and maximum values

<input type= "File" id= "file_id" name= "file_name" > Constructs a File upload part (how to upload, how to interact with backend is unclear)

These are some of the input types in classic HTML, and more input like dates, colors, and so on is supported in HTML5. Http://www.w3school.com.cn/html/html_form_input_types.asp

In addition, the input tag has a number of separate properties for setting some of its features, such as the checked attribute mentioned in the above radio multi-box, in addition to the checked:

ReadOnly setting an input read-only non-editable

Disabled setting an input unavailable non-editable

Size,maxlength These attributes have been mentioned above, I will not say.

Other form elements

As mentioned above, Input,input already has a lot of form elements, besides those input, we have the following elements

<select> drop-down list, inside to add <option>,option can be set Selected,value and other properties, prompting to write in the text in option

<select multiple> multi-box list

<Selectname= "Cars"><optionvalue= "Volvo">Volvo</option><optionvalue= "Saab">Saab</option><optionvalue= "Fiat">Fiat</option><optionvalue= "Audi">Audi</option></Select>

<textarea> Multiline text box, you can set properties such as Name,rows,cols (rows and cols Specify the number of rows in the initial state), or you can set disabled,readonly,maxlength, etc.

<button> Independent button, you can set the onclick and other properties が, anyway, with jquery, it doesn't matter what the onclick is.

"Front-end" HTML Basic knowledge form