HTML获取用户输入的几种玩法

时间：2023-01-16 11:56:32

input标签

input是一个自闭和标签，可以获得用户的输入

form标签

form标签是用来进行表单提交用的，它把用户的输入内容提交到服务器。

一个注册页面的例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--<meta http-equiv="refresh" content="3">-->
    <!--<meta http-equiv="refresh" content="3;Url=http://www.baidu.com">-->
    <meta name="keywords" content="商城">
    <meta name="description" content="网购来这里">
    <title>商城</title>
</head>
<body>
<div>
    <form enctype="multipart/form-data">
        <div>请输入注册信息</div>
        <select name="city">
            <option value="1" selected="selected">北京</option>
            <option value="2">上海</option>
            <option value="3">广州</option>
        </select>
        <input type="text" name="user" value="请输入用户名"/>
        <input type="password" name="password" />
        <p>请输入你的性别</p>
        男：<input type="radio" name="sex" value="1" checked="checked"/>
        女：<input type="radio" name="sex" value="2"/>
        <p>请输入你的爱好</p>
        足球：<input type="checkbox" name="hobby" value="1" checked="checked"/>
        蓝球：<input type="checkbox" name="hobby" value="2"/>
        红球：<input type="checkbox" name="hobby" value="3"/>
        紫球：<input type="checkbox" name="hobby" value="4"/>
        <p>请选择上传的附件</p>
        <input type="file"/>
        <div>
            <textarea>备注</textarea>
        </div>
        <div>
        <input type="reset"/>
        <input type="submit" value="登陆"/>
        </div>

    </form>
</div>
</body>
</html>

form标签是一个表单，它会把表单内部用户输入或选择的信息后端服务器，

form里面可以指定与后端服务器沟通的地址以及方法。

input标签在页面上展示就是一个输入框，定义了你要输入的是文本还是密码，并给每一个输入框定义了一个名字，方便后端服务器分辨是那个输入框输入进来的数据。最后一个type=“submit”是一个登陆按钮。

input系列属性

input type=“test”　　　　   - 提交文本，

input type=“passwd” 　　   -提交密码

input type=“submit” 　　    -提交按键

input type=“buttom” 　　   -按键

input type=“radio” 　　　　-单选框

input type=“checkbox” 　  -多选框

input type=“file”　　　　　 -上传文件按钮（需要依赖form表单的一个属性enctype="multipart/form-data"）

input type=“reset”  　　　　-重置按钮

name="hobby"　　　　　　-通过name属性来让后端服务器识别，用户勾选的是什么框

value="1"　　　　　　　　  -通过value属性，让后端服务器识别，用户勾选属性的值。

checked="checked"           -通过checked属性，设置默认勾选的值。

select标签

select是一个下拉选择框

name="city"　　　　　　　-定义下拉框的属性

option标签

包含在select标签内部，构成一个个的选项。

value="1"　　　　　　　　-选项的值，便于后端服务器的获取。

至此位置，HTML获取用户输入以及与后端服务器进行交互的方式你已经学到。

若想看网页结果，请直接复制代码然后用浏览器打开即可。

HTML获取用户输入的几种玩法的更多相关文章

  1. Python从菜鸟到高手（6）：获取用户输入、函数与注释

    1. 获取用户输入   要编写一个有实际价值的程序,就需要与用户交互.当然,与用户交互有很多方法,例如,GUI(图形用户接口)就是一种非常好的与用户交互的方式,不过我们先不讨论GUI的交互方式,本节会 ...

  2. 16&period;Python input&lpar;&rpar;函数：获取用户输入的字符串

    input() 函数用于向用户生成一条提示,然后获取用户输入的内容.由于 input() 函数总会将用户输入的内容放入字符串中,因此用户可以输入任何内容,input() 函数总是返回一个字符串. 例如 ...

  3. 黑马lavarel教程---2、获取用户输入

    黑马lavarel教程---2.获取用户输入 一.总结 一句话总结: lavarel中获取用户输入可以通过Input外观模式和Request外观模式,两者的对应的方法啥的都一样,比如get.all.o ...

  4. 使用scanner工具类来获取用户输入的信息

    使用scanner工具类来获取用户输入的成绩信息. 步骤:1.导入java.util.Scanner包 2.创建Scanner对象 3.接受并保存用户输入的值 例子:通过用户输入来获取学生成绩 pac ...

  5. Java用Scanner类获取用户输入

    用Java编写程序时,有些数据需要用户输入,这个时候需要调用java提供的Scanner类,这个类在包java.util下,比如求一个矩形的面积,简单的看一下用法: import java.util. ...

  6. python学习&colon;注释、获取用户输入、字符串拼接、运算符、表达式

    注释 #为单行注释'''三个单引号(或者"""三个双引号)为多行注释,例如'''被注释的内容''' '''三个单引号还可以起到多行打印的功能. #ctrl+? 选中的多行 ...

  7. 微信小程序-form表单-获取用户输入文本框的值

    微信小程序-form表单-获取用户输入文本框的值 <input name='formnickname' class="textarea" placeholder=" ...

  8. 微信小程序—如何获取用户输入文本框的值

    我们就拿简单常用的登录来举例子吧,先看最终效果图片

  9. Java入门：基础算法之获取用户输入

    本部分演示如何获取用户输入.我们使用Scanner类来得到用户输入.下面的实例代码中演示了如何获取用户输入的字符串.整数和float数据.主要用到了以下方法: 1)public String next ...

随机推荐

  1. 机器学习十大算法之KNN（K最近邻，k-NearestNeighbor&rpar;算法

    机器学习十大算法之KNN算法 前段时间一直在搞tkinter,机器学习荒废了一阵子.如今想重新写一个,发现遇到不少问题,不过最终还是解决了.希望与大家共同进步. 闲话少说,进入正题. KNN算法也称最 ...

  2. 利用caffe生成 lmdb 格式的文件，并对网络进行FineTuning

    利用caffe生成 lmdb 格式的文件,并对网络进行FineTuning 数据的组织格式为: 首先,所需要的脚本指令路径为: /home/wangxiao/Downloads/caffe-maste ...

  3. 多线程程序设计学习（13）Active Object pattern

    Active Object[接收异步消息的对象] 一:Active Object的参与者--->客户端线程(发起某种操作请求处理)--->代理角色(工头)--->实际执行者(工人)- ...

  4. Linux 信号量同步编程

    前一篇文章概述了Linux 系统中信号量互斥编程,这篇文章正好是前一篇的姊妹篇----信号量同步.说它们是姊妹篇是因为它们都是利用了内核的信号量机制实现了进程间的通信.因为两者所解决的问题不同,因此它 ...

  5. 高级SQL特性

    SQL   SQL 必知必会·笔记<20>高级SQL特性 摘要: 约束(constraint)就是管理如何插入或处理数据库数据的规则.DBMS通过在数据库表上施加约束来实施引用完整性.1. ...

  6. 开始 第一个自己的python爬虫程序 爬磁力链

    不能一事无成,这么久了学python还是吊着,要落地,落在博客园好了,好像公司也只能上博客园了 昨天看了一篇用正则爬电影天堂的视频,直接拿来用,爬磁力吧,爬好玩的 #导入模块 import reque ...

  7. python中yield的用法

    ---"在python中,当你定义一个函数,使用了yield关键字时,这个函数就是一个生成器" (也就是说,只要有yield这个词出现,你在用def定义函数的时候,系统默认这就不是 ...

  8. &lbrack;原&rsqb;Failed connect to mirrors&period;cloud&period;aliyuncs&period;com&colon;80&semi; Connection refused

    web site : https://opsx.alibaba.com/mirror 运行后出现下面的Error: base//x86_64/other_db FAILED http://mirror ...

  9. JAVA算术运算符

    算术运算符 +.-.*(乘号)./(除号,取商).%(取余数.取模) 特殊的运算符:++(加加).--(减减) int  a = 1; a+=10;  等同于a=a+10; a-=5;   等同于a= ...

  10. Java 面向对象之构造方法

    01构造方法引入 A:构造方法的引入 在开发中经常需要在创建对象的同时明确对象的属性值,比如员工入职公司就要明确他的姓名.年龄等属性信息. 那么,创建对象就要明确属性值,那怎么解决呢?也就是在创建对象 ...

相关文章