今天来搞一下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. 061. Rotate List

    题目链接:https://leetcode.com/problems/rotate-list/description/ Example 1: Input: 1->2->3->4-&g ...

  2. MSSQL字符串分割

    CREATE FUNCTION dbo.f_splitstr( @str varchar(8000) )RETURNS @r TABLE(id int IDENTITY(1, 1), value va ...

  3. python-Web-django-自定义标签

    简化:@register.simple_tag def current_time(token): return datetime.datetime.now().strftime(str(token)) ...

  4. Django-ORM之ForeignKey的使用-多对一关系

    ForeignKey使用俩表示两张表多对一关系的外键,外键字段要定义在多属性的表中. 定义外键时,to的表可以直接写类名,但是需要注意类的定义顺序:也可以写字符串式的类名,这样就可以忽略class类的 ...

  5. 系统 --- Linux系统环境搭建

    Linux命令介绍 软硬链接 作用:建立连接文件,linux下的连接文件类似于windows下的快捷方式 分类: 软链接:软链接不占用磁盘空间,源文件删除则软链接失效 硬链接:硬链接只能链接不同文件, ...

  6. 【Linux开发】linux设备驱动归纳总结（五）：1.在内核空间分配内存

    linux设备驱动归纳总结(五):1.在内核空间分配内存 xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx ...

  7. elasticsearch的备份和恢复（转）

    vim /etc/elasticsearch/elasticsearch.yml path.repo: ["/data/backups/es_backup"] #备份目录,根据自己 ...

  8. vim配置及插件安装笔记

    1. 首先打开vim的配置文件vimrc,并加入以下常用的配置: cd ~ mkdir .vim vim .vimrc " 设置当文件被改动时自动载入 set autoread " ...

  9. Python input/output boilerplate for competitive programming

    The following code is my submission for Codeforces 1244C The Football Season. import io import sys i ...

  10. AppCan模拟器调试

    来源: 1, 页面CSS调试 2, JS调试 3, 插件请打包后手机调试 4, 打开另一个页面示例: appcan.button("#myBtn", "ani-uct&q ...