Today Laigao what input tags within the body
In a typical Web page, we often encounter some of the interface, such as register, login, comments, and other environments. In these interactive interface where input is the most commonly used labels.
The basic use of a label .input
The input tag is a self-sealing label, but may have various attributes, these attributes can be defined by the display tag on the page a particular text box, button or the like.
<input type="text">
We can also given other attributes
< INPUT type = 'text'name =' = user'value 'initial value' >
The code above is the definition of an initial value 'initial value' string text box, display the following
There are many type of value, different effects these represent the following
| button | Definition of clickable buttons (in most cases, JavaScript is used by the startup script). |
| checkbox | Definition check box. |
| file | Define the input field and "Browse" button, for file uploads. |
| hidden | The definition of a hidden input field. |
| image | Define the image of the form submit button. |
| password | Defined password field. The characters in the field are masked. |
| radio | Custom radio button. |
| reset | Define the reset button. Reset button will erase all data in the form. |
| submit | Define the submit button. Submit button will send the form data to the server. |
| text | Input field defines a single line, the user can enter text. The default width is 20 characters. |
Two .input form tag label combination
To the login screen, for example, after we enter the account number and password on the page, click 'Login' button, the moment will pass two input values related to the operation log in the background, and that this operation is kind of how it? Now is the time to show the form tag.
form tag is similar to a form, click the submit button after the parameters within will form sent to the background according to the dictionary format. Dictionary key is the name attribute in the input tag. We do a most simple login page. We should first establish the parameters (frame is also the easiest tornado of) a server to receive transfer over.
import tornado import tornado.web class MainHandler(tornado.web.RequestHandler): def get(self): print('in get') self.write('get') name = self.get_argument('user') pwd = self.get_argument('pwd') print(name,pwd) def post(self,*args,**kwargs): print('in post') self.write('POST') name = self.get_argument('user') pwd = self.get_argument('pwd') print(name,pwd) application = tornado.web.Application([(r'/index',MainHandler)]) if __name__ =='__main__': application.listen(8888) tornado.ioloop.IOLoop.instance().start()
Then our html file should look like this
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form> <input type='text'name='user'value='初始值'><br> <input type="password"name='pwd'><br> <input type="button" value="login1"> <input type="submit"value='login2'> </form> </body> </html>
head tag us on the matter, because there is no use of his research. Html display follows
Note that the value of the second button is not login2, but to submit. That how the value of this page sent to the back of it? Here we must add a form of property, look at the background code, the following lines
application = tornado.web.Application([(r'/index',MainHandler)]) if __name__ =='__main__': application.listen(8888) tornado.ioloop.IOLoop.instance().start()
Listening port 8888, the page is / index, so we put into this form of property
<form action='http://localhost:8888/index'>
After running py file, open the page, click Submit after we enter the user name and password to see if there is not ide two values are printed out.
Note submitted after the pop-up page url, which is included in our data filled in (my input before submitting the value userid and password)
http://localhost:8888/index?user=userid&pwd=password
This is not what we want it, after all, the user password is entered not want to be out of the clear text display, then how should we do it? All right, form there is a property tag
<form action='http://localhost:8888/index'method='post'>
method is post when our data is being sent on the inside, but for the moment is to get the fight to the data on the url. What time to put it on the url? We'll come back
And that button is at the moment no effect. Here is a look at the demo. So input the series, form and submit supporting the use of the data is submitted .
III. Usage content loaded in the url
We found some in the Monkey King in the degree of your mother, take a look at what is out url (only interception of the previous paragraph) https://www.baidu.com/s?wd= Monkey King. Then replace the url in the Monkey King Pig, also can direct the search. So this time we need to form data on the url in the
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form action="https://www.baidu.com/s"> <input type="text"name='wd'> <input type="submit">form</>= 'Search'value </body> </html>
We run directly, you can click on the search after the jump to Baidu search.
The radio button for four .input tab
Under some conditions that need to operate the radio, for example, registered sex when filled, this time we give the button should be mutually exclusive, how to set?
男：<input type="radio" name='sex'value=1> 女：<input type="radio" name='sex'value=2>
When using the input tag radio button, you can set a name for their property, when the same number of single marquee name attribute will have exclusive effect. And when the attribute value is a given value may be sent to the background value to distinguish the options.
Five .input label box
And above almost single box, but sometimes need to check the effect of setting is as follows
<p>兴趣爱好</p> 吃:<input type="checkbox"name='hobit'value=0> 喝:<input type="checkbox"name='hobit'value=1> 玩:<input type="checkbox"name='hobit'value=2> 乐:<input type="checkbox"name='hobit'value=3><br/>
When submitted, the data may be transmitted in the form of a list, the corresponding daemon can be acquired in the following manner
hobit = self.get_arguments('hobit')
Direct access to a list.
VI. Drop-down list
Sometimes need drop-down list (select State, City, etc.), is used as follows
<select name="city"> <the Option value = " Beijing " > Beijing </ option> <the Option value = " Shanghai " > Shanghai </ option> <the Option value = " Shenzhen " > Shenzhen </ option> </select>
There select the following attributes
< SELECT size = ". 3" > </ SELECT > displaying a plurality of < SELECT Multiple > </ SELECT > multiple selection
Displaying a plurality of display effect is the following
where the value in the option can be a value, and the effect of the same box.
VII. Multiline text box
Just input in the text attribute is the single line of text, sometimes it is not able to use multi-line text entry input, and use the following
<textarea name=""></textarea>
The default value of this tag is not a value, but rather to write between labels
< TextArea name = "" > here put the default values </ TextArea >
Overview
Several tags are above can be submitted to the background by submit, a later chapter we take a look at those labels used directly without going through the background