今天来搞一下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内标签之交互输入标签一的更多相关文章

  1. 〇二——body内标签之交互输入标签二

    我们在上一章讲了一些要通过后台程序实现交互的标签,下面我们看一看一些不通过后台实现交互的标签. 一.a标签 a标签主要实现超链接的功能 1.跳转效果 这个效果比较简单,直接在属性里添加一个网址,然后可 ...

  2. html:常见行内标签，常见块级标签,常见自闭合标签

    本文内容: 常见行内标签 常见块级标签 常见自闭合标签 首发日期:2018-02-12 修改: 2018-04-25:删除了不常用的标签 常见行内标签: 什么是行内标签: 行内标签就是在页面内只占据刚 ...

  3. Qt和JavaScript使用QWebChannel交互一——和Qt内嵌网页交互

    Qt和JavaScript使用QWebChannel交互一--和Qt内嵌网页交互 目录 Qt和JavaScript使用QWebChannel交互一--和Qt内嵌网页交互 前言 一.效果 二.实现过程 ...

  4. 控制input标签中只能输入数字以及小数点后两位

    js 代码如下: /* 控制input标签中只能输入数字 和小数点后两位 */ function checkNum(obj) { //检查是否是非数字值 if (isNaN(obj.value)) { ...

  5. JSP内置标签 JSP中JavaBean标签 JSP开发模式 EL和JSTL快速入门

    2 JSP内置标签(美化+业务逻辑)   1)为了取代<%%>脚本形式,使用JSP标签/JSP动作,目的:与JSP页面的美化,即JSP面页都是由标签组成,不再有其它的内容   2)JSP内 ...

  6. 学会怎样使用Jsp 内置标签、jstl标签库及自定义标签

    学习jsp不得不学习jsp标签,一般来说,对于一个jsp开发者,可以理解为jsp页面中出现的java代码越少,对jsp的掌握就越好,而替换掉java代码的重要方式就是使用jsp标签.  jsp标签的分 ...

  7. webstorm快速输入标签

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. shell中交互输入自动化

    shell中交互输入自动化 shell中有时我们需要交互,但是呢我们又不想每次从stdin输入,想让其自动化,这时我们就要使shell交互输入自动化了.这个功能很有用的哟.好好学习. 1    利用重 ...

  9. 表单form-input标签禁止聚焦输入

    1.input标签禁止聚焦输入(针对小程序) <input type="text" disabled /> input标签禁止聚焦输入(针对网页html) 1).< ...

随机推荐

  1. 关于组播数据包“发不出去"，c#无法接收

    问题一:发不出去 最近做一个小东西改进方案需要用到组播,简单来说就是我先作为服务器端组播发送设备编号,然后组播成员作为客户端接收消息后先确认对方是不是在呼叫我.是的话就返回一个消息,这样我服务器端就可 ...

  2. 服务器iptables规则记录

    很多时候,我在我自己的VPS上面部署了Cobalt Strike,可是网上很多叼毛就会扫描我们的VPS,然后发现我们的Cobalt Strike,如果你还建有web delivery,还会被人家下载上 ...

  3. 【VS开发】【图像处理】直方图均衡与平台直方图

    目录(?)[-] 直方图均衡化Histogram Equalization 直方图均衡化的主要过程 一个简单的例子 关键的代码实现 平台直方图及均衡化 平台直方图的概念 平台阈值的确定 关键代码实现 ...

  4. linux 下文件上传的两种工具（XFTP5和Putty之pscp）方式

    一.使用XFTP(,需要先在LINUX上安装启用FTP服务) 然后,在WINDOWS上启动XFPT6客户端,将下载的文件上传至LINUX 指定目录: 二.使用PUTTY软件安装目录下的PSCP命令 1 ...

  5. [转帖]AMD霄龙安全加密虚拟化曝漏洞：已修复

    AMD霄龙安全加密虚拟化曝漏洞:已修复 https://www.cnbeta.com/articles/tech/862611.htm 硬件的安全问题 今年初,Google的一位研究人员发现,AMD ...

  6. powerdesigner去掉网格线

    powerdesigner去掉网格线 去掉网格线

  7. linux 使用tmux

    一. 什么是tmux 1.1. tmux 是两个单词的缩写,即“Terminal MultipleXer”,意思是“终端复用器“ 1.2. tmux 结构 1.2.1. tmux主要由三层: < ...

  8. 使用chattr禁止文件被删除

    chattr 是个啥? chattr 修改文件在Linux第二扩展文件系统(E2fs)上的特有属性 使用方法 +i or -i 设置/取消文件不能进行修改:即你不能删除它, 也不能给它重新命名,你不能 ...

  9. python3.7环境下创建app，运行Django1.11版本项目报错SyntaxError: Generator expression must be parenthesized

    咳咳!!! 今天用命令行创建django项目中的app应用,出现了这样一个错误 这个错误在python3.6版本下安装运行django 1.11版本正常运行,但python3.7版本下运行django ...

  10. Codeforces 1178D. Prime Graph

    传送门 首先每个点至少要有两条边连接 那么容易想到先保证这一点然后再慢慢加边 那么先构成一个环即可:$(1,2),(2,3),(3,4)...(n,1)$ 然后考虑加边,发现一个点加一条边还是合法的, ...