一，input系列：name属性用于让后台拿数据。value 只是在屏幕上的显示。

1. input type='text' name='query' value="张三"(相当于默认值)

2. input type='password' name='XXX'  value="张三"(相当于默认值)

3. input type='button'   value='登录'--按钮

4. input type='submit'  value='提交'---提交按钮，提交当前表单，必不可少

5. input type='radio' 单选框    value, name属性（如果name相同则表示互斥）

6. input type='checkbox'  复选框 value,name属性（批量获取数据）

7. input type='file' 依赖form表单的一个属性 enctype="multipart/form-data" 表示把上传的文件一点一点地发给服务器

8. input type='submit' name='提交' 提交

input type='submit' name='重置' 重置

input type='reset'  重置所有用户选择的值

9. select标签   --name, 内部option value,提交到后台；显示多个用size；控制大小用size; size指的是显示的选择框的大小。多选用multiple; 分级显示用optgroup

二，一个实例理解一下提交的过程：https://www.sogou.com/web?query=长城

上节课讲的是提交到一个自己编写的服务器的过程

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <form action="https://www.sogou.com/web">

        <input type="text" name="query"/>

        <input type="submit" value="搜索"/>

    </form>

</body>

</html>

运行结果：

输入要搜索的内容：

点击搜索：

三，<input> 标签用于搜集用户信息。根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。

input type='radio'单选框     value, name属性（如果name相同则表示互斥），value值要提交到后台。如果name相同，则提交value值到后台。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <form>

        <div>

            <p>请选择性别：</p>

            男：<input type="radio" name="gender" value="1"/>

            女：<input type="radio" name="gender" value="2"/>

        </div>

        <input type="submit" value="提交"/>

    </form>

</body>

</html>

运行结果：

四，checkbox是复选框

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <form>

        <div>

            <p>请选择性别：</p>

            男：<input type="radio" name="gender" value="1"/>

            女：<input type="radio" name="gender" value="2"/>

            <p>爱好：</p>

            篮球：<input type="checkbox" name="favor" value="1"/>

            足球：<input type="checkbox" name="favor" value="2"/>

            网球：<input type="checkbox" name="favor" value="3"/>

            皮球：<input type="checkbox" name="favor" value="4"/>

            台球：<input type="checkbox" name="favor" value="5"/>

            <p>技能：</p>

            Linux：<input type="checkbox" name="skill" value="1"/>

            Python：<input type="checkbox" name="skill" value="2"/>

        </div>

        <input type="submit" value="提交"/>

    </form>

</body>

</html>

运行结果：

五，checked="checked" 设置默认值

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <form>

        <div>

            <p>请选择性别：</p>

            男：<input type="radio" name="gender" value="1"/>

            女：<input type="radio" name="gender" value="2"/>

            <p>爱好：</p>

            篮球：<input type="checkbox" name="favor" value="1" checked="checked"/>

            足球：<input type="checkbox" name="favor" value="2"/>

            网球：<input type="checkbox" name="favor" value="3"/>

            皮球：<input type="checkbox" name="favor" value="4"/>

            台球：<input type="checkbox" name="favor" value="5"/>

            <p>技能：</p>

            Linux：<input type="checkbox" name="skill" value="1"/>

            Python：<input type="checkbox" name="skill" value="2"/>

        </div>

        <input type="submit" value="提交"/>

    </form>

</body>

</html>

运行结果：

六， input type='file' 依赖form表单的一个属性 enctype="multipart/form-data" 表示把上传的文件一点一点地发给服务器

后台根据filename 去获取到文件名。

enctype是encodetype的缩写，翻译成中文就是编码类型的意思！multipart/form-data是指表单数据有多部分构成：既有文本数据，
又有文件等二进制数据的意思。另外需要注意的是：默认情况下，enctype的值是application/x-www-form-urlencoded，不能用于文件上传；
只有使用了multipart/form-data，才能完整的传递文件数据。对于文件上传工作，其实是在前端完成的，即，在php，java等语言处理之前，
文件其实就已经被上传到服务器了，服务器脚本语言的作用不过是将这些临时文件持久化而已！
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <form enctype="multipart/form-data">

        <div>

            <p>请选择性别：</p>

            男：<input type="radio" name="gender" value="1"/>

            女：<input type="radio" name="gender" value="2"/>

            <p>爱好：</p>

            篮球：<input type="checkbox" name="favor" value="1" checked="checked"/>

            足球：<input type="checkbox" name="favor" value="2"/>

            网球：<input type="checkbox" name="favor" value="3"/>

            皮球：<input type="checkbox" name="favor" value="4"/>

            台球：<input type="checkbox" name="favor" value="5"/>

            <p>技能：</p>

            Linux：<input type="checkbox" name="skill" value="1"/>

            Python：<input type="checkbox" name="skill" value="2"/>

            <p>上传文件</p>

            <input type="file" name="filename"/>

        </div>

        <input type="submit" value="提交"/>

    </form>

</body>

</html>

运行结果：

七，<input type="reset" value="重置"/> 重置按钮，除了默认值，其他的都会被清空

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <form enctype="multipart/form-data">

        <div>

            <p>请选择性别：</p>

            男：<input type="radio" name="gender" value="1"/>

            女：<input type="radio" name="gender" value="2"/>

            <p>爱好：</p>

            篮球：<input type="checkbox" name="favor" value="1" checked="checked"/>

            足球：<input type="checkbox" name="favor" value="2"/>

            网球：<input type="checkbox" name="favor" value="3"/>

            皮球：<input type="checkbox" name="favor" value="4"/>

            台球：<input type="checkbox" name="favor" value="5"/>

            <p>技能：</p>

            Linux：<input type="checkbox" name="skill" value="1"/>

            Python：<input type="checkbox" name="skill" value="2"/>

            <p>上传文件</p>

            <input type="file" name="filename"/>

        </div>

        <input type="submit" value="提交"/>

        <input type="reset" value="重置"/>

    </form>

</body>

</html>

运行结果：

html的body内标签之input系列2的更多相关文章

  1. 4、html的body内标签之input系列

    一.input标签与form表单 <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

  2. html的body内标签之input系列1

    1. Form的作用:提交当前的表单. 类似于去了银行提交的纸质单子,递到后台去办理相关业务. text,password只有输入的功能:button,submit只有点击的功能.想要把这些信息提交, ...

  3. 第一篇-Html标签中head标签，body标签中input系列，textarea和select标签

    第十四周课程(1-12章节) HTML 裸体 CSS   穿华丽衣服 Javascript 动起来 一 HTML (20个标签) 1.我们的浏览器是socket客户端 2.一套规则,浏览器认识的规则 ...

  4. 前端 html body 内标签之input

    可以做登录页面 text是文本输入框 <!DOCTYPE html> <html lang="en"> <head> <meta char ...

  5. css块级标签，行内标签，行内块标签的转换（2）

            css块级标签,行内标签,行内块标签的转换 版权声明 本文原创作者:雨点的名字 作者博客地址:https://home.cnblogs.com/u/qdhxhz/ 在基础1中,我详细讲 ...

  6. HTML的BODY内标签介绍

    一.基本标签 <body> <b>加粗</b> <i>斜体</i> <u>下划线</u> <s>删除线& ...

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

    今天来搞一下body内的input标签 在一般的网页中,我们经常会遇到一些交互界面,比如注册.登录.评论等环境.在这些交互界面里最常使用的就是input标签. 一.input标签基本使用 input标 ...

  8. css块级标签、行内标签、行内块级标签

    <html><head lang="en"> <meta charset="UTF-8"> <title>< ...

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

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

随机推荐

  1. 成都Uber优步司机奖励政策（1月15日）

    滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...

  2. P2664 树上游戏

    P2664 树上游戏 https://www.luogu.org/problemnew/show/P2664 分析: 点分治. 首先关于答案的统计转化成计算每个颜色的贡献. 1.计算从根出发的路径的答 ...

  3. NB-IOT使用LWM2M移动onenet基础通信套件对接之APN设置

    1. 先搞懂APN是做什么的?APN指一种网络接入技术,是通过手机上网时必须配置的一个参数,它决定了手机通过哪种接入方式来访问网络.对于手机用户来说,可以访问的外部网络类型有很多,例如:Interne ...

  4. solr 常见的问题整理 -费元星

    本文是我在开发过程中遇到的一些问题的整理,有些摘自网上别人的方法. 1. org.apache.solr.client.solrj.SolrServerException: Timeout occur ...

  5. Filter配置多个url-pattern

    java开发中会用的Filter过滤器,有时候开发需要,在一个Filter中需要配置多个过滤地址,即<url-pattern>,下面就说一下一个Filter过滤器中多个<url-pa ...

  6. elasticsearch增删改查操作

    目录 1. 插入数据 2. 更改数据 3. 删除数据 4. 检索文档 1. 插入数据 关于下面的代码如何使用,可以借助于kibana的console,浏览器打开地址: http://xxx.xxx.x ...

  7. 移动性能测试之gemebench安装

    越来越多的人从事各种移动端性能测试,但工具和文档的资料却相对较少,这两天需要测试一款APP的性能,就来先简单介绍下gamebench的安装吧! 作为国人来说,使用gamebench还是有相当多的坑点: ...

  8. Spring Cloud（十一）：服务网关 Zuul（过滤器）【Finchley 版】

    Spring Cloud(十一):服务网关 Zuul(过滤器)[Finchley 版]  发表于 2018-04-23 |  更新于 2018-05-07 |  在上篇文章中我们了解了 Spring ...

  9. jupyter notebook 使用cmd命令窗口打开

    第一步:将文件路径改为你需要使用文件所在的路径 第二部:   jupyter notebook

  10. Python变量常量及注释

    一.变量命名规则1.有字母.数字.下划线搭配组合而成2.不能以数字开头,更不能全为数字3.不能用Python的关键字4.不要太长5.名字要有意义6.不要用中文7.区分大小写8.采用驼峰体命名(多个单词 ...