今天来搞一下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. H3C 模拟器 防火墙开启Web功能

    最近在搞运维的一些事情,由于缺少实体的机器来进行操作,先在模拟器里面进行 环境 windows 10,模拟器 HCL_V2.1.1 防火墙 1 在windows添加虚拟网卡 我的电脑--管理--设备管 ...

  2. 【转】Linux curl命令详解

    [From]https://www.cnblogs.com/duhuo/p/5695256.html 命令:curl 在Linux中curl是一个利用URL规则在命令行下工作的文件传输工具,可以说是一 ...

  3. 怎样提高js的编程能力

    1,学习js分几个阶段,没入门,入门初学者,中级水平,高级水平,ppt水平. 2,没入门的如何学习? 我当初是先学jquery,有css和html基础,有css基础看jq的语法很简单,就是选择符,jq ...

  4. ssh远程连接的故障排查详解

    排查故障: 1.两个机器之间是否通畅,看物理网络(网线网卡,IP是不是正确) ping ip -t 来检测物理网络是否通畅 通 不通 不通: 1.客户端到服务器端物理链路有问题 网卡 ,IP ,  网 ...

  5. hashmap C++实现

    hashmap.h #ifndef _HASHMAP_H_ #define _HASHMAP_H_ template<class Key, class Value> class HashN ...

  6. [Python3] 037 函数式编程 装饰器

    目录 函数式编程 之 装饰器 Decrator 1. 引子 2. 简介 3. 使用 函数式编程 之 装饰器 Decrator 1. 引子 >>> def func(): ... pr ...

  7. 掌握MyBatis的核心对象

    一.获取SqlSessionFactoryBuilder对象 1.SqlSessionFactoryBuilder的作用 所有的MyBatis应用都是以SqlSessionFactory实例为中心.S ...

  8. Spring使用注解实现AOP

    一.AspectJ概述 AspectJ是一个面向切面的框架,它扩展了Java语言.定义了AOP语法,能够在编译期提供代码的织入,它提供了一个专门的编译期用来生成遵守字节编码规范的Class文件. @A ...

  9. 从入门到自闭之Python序列化

    序列化(背) json :将数据类型转换成字符串(序列化),将字符串装换成原数据类型(反序列),支持dict,list,tuple等,序列后都变成了列表 dumps,loads ------ 用于网络 ...

  10. USB键盘驱动分析

    简介 本文介绍USB驱动程序编写的流程,分析一个键盘的USB程序,基于linux-2.6.39 USB驱动概要 分层 主机层面的USB驱动的整体架构可以分成4层,自顶到下依次是 1.USB设备驱动:本 ...