首页 > 其他分享 >HTML-Input 表单

HTML-Input 表单

时间:2023-11-29 13:11:34浏览次数:22  
标签:控件 -- 标签 默认 表单 HTML input Input

 浏览器兼容性的原因,在这里推荐使用谷歌

1.input 表单介绍:

    用于与用户交互,收集信息。(收集不同类型的用户输入)

2.input 表单 组成:

   ①表单信息:提示用户操作(如何输入,怎样输入)

   ②表单控件:文本输入框、复选框、按钮

   ③表单域:表单信息和表单控件都在域里。可定义、处理表单数据地址和提交数据到服务器的函数

3.input 表单

  (1).input标签语法

      input 表单控件 标签 是单标签。

  (2).input 标签属性 

    type:类型。用于设置控件类型 。 如 : 设置 text 类型 , 就是 输入框 ;也可以放以下

        submit--按钮

        name : 名称 。用户自定义的字符串 ;

        value : 默认文本内容 , 用户自定义的字符串 ;

        url:网址

      email--邮箱

      number:数值
        属性(可限制输入大小值):max;mini;step--设置每次默认加值  

      range:滑块形式的数字域 默认为1-100

        属性(可限制输入大小值):max;mini;step--设置每次默认加值

      日期和时间类型:date--日月年;month--月份(没有日);week--周;time--小时、分钟

      search--搜索域:result="s"

      color颜色:
        RGB(三原色):红绿蓝;区间0-255;数字越大颜色越纯

代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../1129CSS/lianxi.css">
</head>
<body>
    <form action="">

        账户:<input type="text"><br>
        邮箱:<input type="email"><br><br>

        <!-- number  max设置最大值,min设置最小值,step设置默认加值 -->
        数值:<input type="number" max="50" min="0" step="3"><br><br><br>

        滑块:<input type="range" max="100" min="3" step="11"><br><br>

        <!-- date/month/week/time -->
        date: <input type="date"><br><br><br>
        月份: <input type="month"><br><br><br>
        周:  <input type="week"><br><br><br>
        时间:<input type="time"><br><br><br>

        <!-- 搜索域 -->
        搜索域:<input type="search" name="search" result="s"><br><br><br>

        <!-- color -->
        颜色: <input type="color">

        <!-- submit-按钮 改名,可把name 换为value-->
        <input type="submit" name="提交" value="登录">

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

视图:

    

 


 

 

    checkbox:复选框  checked- 设默认  

    select:下拉框  selected-设默认

    label是 元素定义标注 用于 input、select和textarea

标签:控件,--,标签,默认,表单,HTML,input,Input
From: https://www.cnblogs.com/warmNest-llb/p/17863120.html

相关文章

  • Golang Gin 获取Restful参数、URL查询参数,Form 表单参数,JSON格式参数
    前言http请求中,可以通过URL查询参数提交数据到服务器,可以通过post的json方式,还有一直方式就是Form表单。Form表单相比URL查询参数,用户体验好,可以承载更多的数据,尤其是文件上传时,特别方便。这里推荐飞雪无情的博客;写了一些列的gin的使用教程,很时候新手学习如果想对gin有一个完整......
  • 程序与用户交互(input、print)
    程序与用户交互【1】输入(input)(1)input输入一些内容后,按下回车键后,input函数会返回用户输入的内容input接受的所有数据类型都是str类型username=input("请输入你的用户名:>>>")password=input("请输入你的密码:>>>")print(f'你的用户名:{username}')print(f'你的密码:{pa......
  • element-plus之form表单场景大全
    1.:validate-event="false"的作用是,当前这个表单change或者blur的时候不进行表单校验,只有提交按钮验证时候才校验标红框,场景运用:当切换其他tab也好,根据select1选的值,然后给select2赋值,结果没查到select2为空数组时候自动标红,类似这种不想要红的可以处理<el-select......
  • html2canvas截图
    注意:1、supervision_box获取的Dom节点一定不能使用overflow:auto,否则滚动的内容将无法截图(overflow:auto放在父级上面滚动)2、height:2800一定要大于Dom的高度否则也截图不完整constdownImg=()=>{constbox=document.querySelector('.supervision_box')html2......
  • 输入框、文本域中内容底部有红色波浪线,如何去掉?vue2 html
    取消检查就不会有红色波浪线添加属性:spellcheck="false"1<el-input2type="textarea"3:autosize="{minRows:2,maxRows:40}"4placeholder="请输入内容"5v-model.trim="text"......
  • 关于html5的学习和几款常用软件
    css样式表的三种样式优先级,原则就是就近原则,内联样式>内部样式>外部样式。 去除a标签下划线,设置style="text-decoration:none"。 引入外部css样式文件,在head中使用link标签引入。 如果把链接的target属性设置为"_blank",该链接会在新窗口中打开。 &nbsp空格占位符......
  • 金蝶云星空表单插件传递参数到服务插件
    一、业务需求操作售后单行反关闭时将当前选中行的序号传递到服务端,然后在服务端接收序列号,根据序列号处理相关逻辑。二、开发实现2.1、传递参数售后单表单插件的BeforeDoOperation事件publicoverridevoidBeforeDoOperation(BeforeDoOperationEventArgse){base.Befo......
  • 【Flask使用】第6篇:Flask数据库和表单验证。0基础md文档集合(附代码,可自取)
    本文的主要内容:flask视图&路由、虚拟环境安装、路由各种定义、状态保持、cookie、session、模板基本使用、过滤器&自定义过滤器、模板代码复用:宏、继承/包含、模板中特有变量和函数、Flask-WTF表单、CSRF、数据库操作、ORM、Flask-SQLAlchemy、增删改查操作、案例、蓝图、单元测......
  • html所有元素
    前面写过不在记录记录没有的 <address> 元素用作联系方式<article>元素用作博客帖子标题元素可无限使用<audio>音频元素<button>这个就不介绍了 <code> 元素呈现一段计算机代码  <caption>表格标题 <colgroup>表格列组暂时只知道可用于背景色<col> 定......
  • HTMLElement: offsetParent property
    HTMLElement:offsetParentpropertyTheHTMLElement.offsetParentread-onlypropertyreturnsareferencetotheelementwhichistheclosest(nearestinthecontainmenthierarchy)positionedancestorelement.Apositionedancestoriseither:anelementwit......