今天来搞一下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. Python：Base2（List和Tuple类型， 条件判断和循环，Dict和Set类型）

    1.Python创建list: Python内置的一种数据类型是列表:list.list是一种有序的集合,可以随时添加和删除其中的元素. 比如,列出班里所有同学的名字,就可以用一个list表示: &g ...

  2. python定位隐藏元素

    定位隐藏要素的原理: 页面主要通过“display:none”来控制元素不可见.所以我们需要通过javaScript修改display的值得值为display="block,来实现元素定位的 ...

  3. Mybatis操作数据时出现：java.sql.SQLSyntaxErrorException: Unknown column 'XXX' in 'field list'

    这个错误比较重要,而且很常见,故单独进行说明: Mybatis出现:Unknown column 'xxx' in 'field list' 先来看一下程序的内部: dao.addUser(" ...

  4. caoz的梦呓：创业公司如何做好信息安全

    猫宁!!! 参考链接:https://mp.weixin.qq.com/s/gCWjzHBRfbPFhNeg2VtFhA https://mp.weixin.qq.com/s/bmifCmD2CHV1 ...

  5. 机器学习实战笔记——KNN约会网站

    ''' 机器学习实战——KNN约会网站优化 ''' import operator import numpy as np from numpy import * from matplotlib.fon ...

  6. 【Linux开发】linux设备驱动归纳总结（三）：7.异步通知fasync

    linux设备驱动归纳总结(三):7.异步通知fasync xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx ...

  7. icon.css

    .icon-blank{ background:url('icons/blank.gif') no-repeat; } .icon-add{ background:url('icons/edit_ad ...

  8. Column常用的参数

    #encoding: utf-8 from sqlalchemy import create_engine,Column,Integer,String,DateTime from sqlalchemy ...

  9. apache 设置允许跨域

    1.首先找到 httpd.conf 文件 找到   #LoadModule headers_module modules/mod_headers.so 把#注释符去掉(也有可能已经默认去掉了) 目的是 ...

  10. Git及码云学习总结

    前言 一.Git是一个版本管理工具软件. 二.windows 系统的使用: 1.git软件的安装:https://git-scm.com/downloads mac系统是自带的不用安装 windows ...