〇一——body内标签之交互输入标签一

今天来搞一下body内的input标签

在一般的网页中，我们经常会遇到一些交互界面，比如注册、登录、评论等环境。在这些交互界面里最常使用的就是input标签。

一.input标签基本使用

input标签是个自封闭标签，但是可以有各种属性，可以通过这些属性定义这个标签在页面上的显示效果具体是一个文本框，还是个按钮等等。

<input type="text">

我们还可以给定其他的属性

<input type='text'name='user'value='初始值'>

上面的代码就是定义了一个初始值为‘初始值’字符串的文本框，显示效果如下

type的值有很多种，分别表示下面这些不同的效果

button	定义可点击按钮（多数情况下，用于通过 JavaScript 启动脚本）。
checkbox	定义复选框。
file	定义输入字段和 "浏览"按钮，供文件上传。
hidden	定义隐藏的输入字段。
image	定义图像形式的提交按钮。
password	定义密码字段。该字段中的字符被掩码。
radio	定义单选按钮。
reset	定义重置按钮。重置按钮会清除表单中的所有数据。
submit	定义提交按钮。提交按钮会把表单数据发送到服务器。
text	定义单行的输入字段，用户可在其中输入文本。默认宽度为 20 个字符。

二.input标签结合form标签的使用

以登录界面为例，我们在页面上输入账号和密码以后点击‘登录’按钮，此刻会把两个输入的值传递给后台进行相关登录操作，那这个操作又是怎么样的呢？此刻就是form标签表演的时候了。

form标签类似于一个表单，在点击submit按钮以后会把form内的参数按照字典的格式发送给后台。字典的key就是input标签内的name属性。我们就做一个最简易的登录的页面。这里需要先建立一个服务端用来接收传递过来的参数（也是个最简易的tornado的框架）。

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()

tornado框架

然后我们的html文件应该是这样的

<!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标签里我们就不管了，因为这里不研究他的用法。html的显示效果如下

注意，第二个按钮的值并不是login2，而是提交。那怎么把这个页面的值发送给后台呢？这里就要加个表单的属性了，看下后台的代码，有下面的几行

application = tornado.web.Application([(r'/index',MainHandler)])

if __name__ =='__main__':
    application.listen(8888)
    tornado.ioloop.IOLoop.instance().start()

监听了8888端口，页面为/index,于是我们就把表单的属性改成这样的

<form action='http://localhost:8888/index'>

运行py文件以后，打开页面，在我们填入用户名和密码以后点击提交，看看ide里是不是两个值都被打印出来了。

注意提交以后弹出页面url，这是包含了我们所填数据的（我在提交前输入的值为userid和password）

http://localhost:8888/index?user=userid&pwd=password

这不是我们想要的吧，毕竟输入的用户密码是不想被明文展示出来的，那又该怎么办呢？没事，form标签还有一个属性

<form action='http://localhost:8888/index'method='post'>

method值为post的时候，我们的数据是被放在内部发送的，而为get的时候就是将数据拼到url上。那什么时候要放到url上呢？我们后面会讲到

而那个button此刻是没什么作用的。在这里就是演示一下。所以input系列里，form和submit是配套使用进行数据提交的。

三.内容加载url内的用法

我们在度娘里搜一下孙悟空，看看出来的url是什么（只截取前面一段）https://www.baidu.com/s?wd=孙悟空。再把url里的孙悟空换成猪八戒，也是可以直接搜索的。所以这个时候就需要把表单里的数据放在url里了

<!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"value='搜索'>
    </form>

</body>
</html>

我们直接运行，点击搜索以后就可以跳转到百度的搜索。

四.input标签中的单选按钮

有些环境下是需要单选操作的，比方注册时候填入的性别，这时候我们给出的按钮应该是互斥的，那怎么设置？

男：<input type="radio" name='sex'value=1>
女：<input type="radio" name='sex'value=2>

在使用input标签中的单选框的时候，可以为其设定一个name属性，当几个单选框的name属性一致的时候就有了互斥的效果。并且在给定value属性的时候是可以将value的值发送给后台用以区分选项的。

五.input标签中的复选框

和上面的单选框差不多，但是有些时候是需要复选效果的，设置方法如下

<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/>

在提交的时候，可以按列表的形式发送数据，对应后台程序可以用下面的方式获取

hobit = self.get_arguments('hobit')

就直接获得了一个列表。

六.下拉列表

有些时候需要下拉列表(选择省份、城市等)，用法如下

<select name="city">
        <option value="北京">北京</option>
        <option value="上海">上海</option>
        <option value="深圳">深圳</option>
</select>

select还有下面属性

<select size="3"></select>         显示多个
<select multiple></select>         多选

显示多个就是下面的显示效果

在option里的value可以是值，和复选框的效果一样。

七.多行文本框

刚才input里的text属性的是单行文本，有些时候是要用多行文本输入的就不能用input了，要用下面的

<textarea name=""></textarea>

这个标签里的默认值就不是value了，而是要写在标签之间

<textarea name="">这里放的是默认值</textarea>

总述

　　上面的几种标签都是可以通过submit提交给后台的，后面一章我们来看一看那些直接使用不通过后台的标签

〇一——body内标签之交互输入标签一

猜你喜欢