一、input标签与form表单

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <form action="http://ip:port/index" method="post">

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

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

        <input type="password" name="pwd"/>

        <!--{'user'：'用户输入的用户’，'emai1'：'xx'，'pwd’：'xx'}-->

        <input type="button" value="登录1" />

        <input type="submit" value="登录2" />

    </form>

</body>

</html>

说明：

#

<input>是一个输入标签；

表单使用表单标签 <form> 来设置，要提交内容必须有<form>标签；

#

<form action="http://ip:port/index" method="post">

    action="http://ip:port/index" ：表示当前表单中的内容提交给哪个页面进行处理；

    method="post" ：表示当前表单提交的方式，常见的有get和post方式，默认是get提交；

#

<input type="text" name="user"/> ：

<input type="text" name="email" />：

    文本域通过<input type="text"> 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。

    name="user" 、name="email" 相当于为这个输入框设置一个值，

#

<input type="password" name="pwd"/>：

    密码字段通过标签<input type="password"> 来定义，不显示明文；

    name="pwd" 相当于为这个输入框设置一个值，

#

name="user" 、name="email"、name="pwd" 在内部会以字典的形式，发送给form action="http://ip:port/index"定义的URL，

后端会判断处理提交过去的数据；

如果是get请求，会在url里拼接处提交的数据；post请求则不会显示，会在内部传递过去；
#

<input type="button" value="登录1" />

<input type="submit" value="登录2" />

    input type="button"：按钮，目前没有什么效果，只能点击，不能提交数据；

    input type="submit"：将表单里的信息提交给<form>表单属性action所指向的地址；

二、单选框

<!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="go" />

    </form>

</body>

</html>

说明：

#

首先说明<form>中的<div>、<p>等标签不会被提交；

#

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

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

    input type="radio"：定义单选框；

    name="gender"：所有单选框的name定义为相同的(互斥)，才能形成单选框；

    value="1" 、value="2" 将value提交到后台，进行识别处理；

三、复选框

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <form>

        <div>

            <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" />

            <p>请选择技能：</p>

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

            python: <input type="checkbox" name="skill" />

        </div>

        <input type="submit" value="go" />

    </form>

</body>

</html>

说明：

#

<input type="checkbox"> 定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。

#

name="favor"  value="1"  checked="checked"

name="favor" value="2"

复选框的name都设置为相同的，不会互斥，为什么name要设置为相同呢？

因为可能有很多要复选的项目类型(爱好、技能等)，一个大的类型设置一个name，

然后再给每一项设置一个value，就可以根据name+value的方式提交数据，

如果给每一项设置一个name，就会很麻烦，不容易分辨；

checked="checked"：设置默认值，默认就会被勾选上，可以设置多个，

单选框也可以用此方式设置默认值；

四、上传文件

<!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="file" name="fname" />

        </div>

        <input type="submit" value="go" />

    </form>

</body>

</html>

说明：

#

input type="file"  name="fname"

表示上传文件，可以选择本地文件；

name="fname" 获取文件名；

#

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

上传文件，依赖于form表单的此属性；

五、重置

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

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

        <div>

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

        </div>

        <input type="submit" value="go" />

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

    </form>

</body>

</html>

说明：

点击“重置”按钮，就会清空输入框或者选中的内容；

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

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

    一,input系列:name属性用于让后台拿数据.value 只是在屏幕上的显示. 1. input type='text' name='query' value="张三"(相当于 ...

  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块级标签、行内标签、行内块级标签

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

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

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

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

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

  8. HTML开发之（块级标签，行内标签，行内块标签）

    显示模式的特性: 主要分为两大类: 块级元素:独占一行,对宽高的属性值生效:如果不给宽度,块级元素就默认为浏览器的宽度,即就是100%宽: 行内元素:可以多个标签存在一行,对宽高属性值不生效,完全靠内 ...

  9. 关于html 中form表单的内标签和使用

    表单标记 1.普通文本框: <input type=”text” name=”名称” value=”值”;不写value默认为空/> 2.密码框:<input type=”passw ...

随机推荐

  1. 三期_day05_Dao层的准备工作_II

    工作文件夹: 实体类:UserInfo.java package com.yc.crm.entity; import java.util.Date; public class UserInfo { p ...

  2. Java并发编程（三）volatile域

    相关文章 Java并发编程(一)线程定义.状态和属性 Java并发编程(二)同步 Android多线程(一)线程池 Android多线程(二)AsyncTask源代码分析 前言 有时仅仅为了读写一个或 ...

  3. react 创建组件 （二）component

    因为ES6对类和继承有语法级别的支持,所以用ES6创建组件的方式更加优雅,下面是示例: import React from 'react'; class Greeting extends React. ...

  4. JNI——访问数组

    JNI在处理基本类型数组和对象数组上面是不同的.对象数组里面是一些指向对象实例或者其它数组的引用. 因为速度的原因,先通过GetXXXArrayElements函数把简单类型的数组转化成本地类型的数组 ...

  5. struts.xml中为什么加上<constant name="struts.devMode" value="true" />就出错

    严重: Exception starting filter struts2 java.lang.NullPointerException at com.opensymphony.xwork2.util ...

  6. HDU 3065 病毒侵袭持续中（AC自己主动机）

    题目链接:http://acm.hdu.edu.cn/showproblem.php? pid=3065 Problem Description 小t非常感谢大家帮忙攻克了他的上一个问题.然而病毒侵袭 ...

  7. CAShapeLayer的使用

    CAShapeLayer的使用 1.CAShapeLayer 简介 1.CAShapeLayer继承至CALayer,可以使用CALayer的所有属性值 2.CAShapeLayer需要与贝塞尔曲线配 ...

  8. CSS transform旋转问题

    我们都知道css的transform可以让旋转多少角度:transform:rotate(90deg),但是设置后只能旋转一次,如何想让它一直旋转下去怎么办?一种是使用matrix属性获取当前tran ...

  9. strsep strpbrk

    #include <stdio.h> #include <string.h> int main(void) { char s[] = "aa,bb,cc.11,22, ...

  10. Arcgis Engine（ae）接口详解（6）：workspace操作

    //此处用的workspace来源与用户选择 IWorkspace workspace = null; //workspace一般等同于数据库 //工作空间类型,也可理解为数据库类型 //esriFi ...