下拉框,文本域和文件域

2023-11-19

<!-- 下拉框,列表框   -->
<!-- selected默认选择   -->
<p>国家:
    <select name="列表名称" >
        <option value="China">中国</option>
        <option value="US">美国</option>
        <option value="eth"selected>瑞士</option>
        <option value="yindu">印度</option>
    </select>
</p>

文本域

<!-- 文本域
cols:可以显示有多少列
rows:可以显示有多少行
  -->
<p>反馈:
    <textarea name="textarea" id="" cols="50" rows="10">文本内容</textarea>


</p>

文件域

<!--文件域
<input type="file" name="files">

    -->
<p>
    <input type="file" name="files">
    <input type="button" value="上传" name="upload">
</p>

邮件验证

<!-- 邮件验证-->
    <p>邮箱:

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

<!--URL-->
<!--URL-->
    <p>URL:

        <input type="url" name="url">

    </p>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登陆注册</title>
</head>
<body>
<h1>注册</h1>

<!-- 表单form
action:表单提交的位置,可以是网站,也可以是一个请求处理地址
method :post ,get 提交方式;
           get方式提交:我们可以在url中看到我们提交的信息,不安全,高效
           post方式:比较安全,传输大文件,
get是在uml里面显示表单信息 post则是隐藏
value="基哥好帅" 默认初始值
maxlength="8" 最长能写几个字符
size="8"   文本框的长度
<p>名字: <input type="text" name="username" value="基哥好帅" maxlength="8" size="8" readonly></p>
readonly只读
disabled禁用
hidden 隐藏
-->
<form action="1.我的第一个网页.html" method="get">
<!--  文本输入框  input type="text"-->
<p>名字: <input type="text" name="username" value="基哥好帅" maxlength="8" size="8" ></p>
<!--   密码框: input type="password" -->
    <p>密码: <input type="password" name="pwd" value="2001" hidden></p>

<!--  单选框标签 必须要写上value 和相同组名name
 input type="radio"
 value=单选框的值
 name=组
 -->
    <p>性别
    <input type="radio" value="boy" name="sex" disabled/>男
    <input type="radio" value="girl" name="sex"/>女
    </p>


<!-- 多选框   -->
    <p>爱好:
        <input type="checkbox" value="sleep" name="hobby" />睡觉
        <input type="checkbox" value="code" name="hobby" checked/>敲代码
        <input type="checkbox" value="chat" name="hobby" />聊天
        <input type="checkbox" value="game" name="hobby" />打游戏
    </p>



<!--   创建按钮
 input type="button"普通按钮
 input type="image"图片按钮 会提交
 input type="submit"提交按钮
 input type="reset"重置按钮
 -->
<p>按钮:
    <input type="button" name="btn1" value="点击变长">
<!--    <input type="image" src="../resources/image/图像标签.jpg">-->
</p>

<!-- 下拉框,列表框   -->
<!-- selected默认选择   -->
<p>国家:
    <select name="列表名称" >
        <option value="China">中国</option>
        <option value="US">美国</option>
        <option value="eth"selected>瑞士</option>
        <option value="yindu">印度</option>
    </select>
</p>



<!-- 文本域
cols:可以显示有多少列
rows:可以显示有多少行
  -->
<p>反馈:
    <textarea name="textarea" id="" cols="50" rows="10">文本内容</textarea>


</p>

<!--文件域
<input type="file" name="files">

    -->
<p>
    <input type="file" name="files">
    <input type="button" value="上传" name="upload">
</p>






<!-- 邮件验证-->
    <p>邮箱:

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

<!--URL-->
    <p>URL:

        <input type="url" name="url">

    </p>
<!--数字
step往上加 往下减 按钮
-->
    <p>商品数量:

        <input type="number" name="number" max="100" min="0" step="1">

    </p>



<!--  滑块  -->
<p>音量
    <input type="range" name="voice" min="0" max="100" step="10"/>
    
</p>


<!-- 搜索框   -->
<p>搜索
    <input type="search" name="search">
    
    
    
</p>

<!--增强鼠标可用性
鼠标点击标签,光标立马进入框里
-->
<p>
    <label for="mark">你点我试试</label>
    <input type="text" id="mark">
</p>









  <p><input type="submit">
<!--   submit提交   -->
    <input type="reset"></p>
<!--  reset 重置  -->


<!--  type:checkbox(多选框)  radio(单选框) hidden(隐藏的)  -->
<!--  value 元素的初始值。type为radio时必须指定一个值  -->
<!--  size 指定表单元素的初始宽度。当type为text或password时,表单元素的大小一字符为单位。对于其他类型,宽度以像素为单位  -->
<!--  checked type为radio或checkbox时,指定按钮是否被选中  -->
<!--  maxlength type为test或password时,输入的最大字符数-->
</form>



</body>
</html>

表单如何实现验证?

<!--  自定义正则表达式验证

 -->
    <p>自定义邮箱
        <input type="text" name="diymail" pattern="/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/
/^[a-z\d]+(\.[a-z\d]+)*@([\da-z](-[\da-z])?)+(\.{1,2}[a-z]+)+$/或\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*" >


    </p>

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

下拉框,文本域和文件域 的相关文章

  • 提交和 onclick 不能一起工作

  • 为具有可变内容的内联块元素提供相同的高度?

    我有 4 个宽度固定但内容可变的内联块元素 并且我希望所有这些元素具有相同的高度 最大元素的高度 请参见这个jsfiddle http jsfiddle net kKZXj 我应该如何实现这个目标 如果仅使用 css 无法做到这一点 那么使
  • 在 HTML SELECT 标记中禁用键盘

    我想禁用 HTML SELECT 标记的键盘 以便用户只能使用鼠标来选择选项 我试过了event cancelBubble true on the onkeydown onkeyup and onkeypress没有运气的事件 有任何想法吗
  • .net MVC 将 MP4 流式传输到 iDevice 问题

    我一直在编写用于提供视频服务的一段代码 但遇到了一些问题 代码如下 public ResumingFileStreamResult GetMP4Video string videoID if User Identity IsAuthenti
  • Jquery 动画与 CSS 浮动

    我的代码有问题 宽度似乎可以工作 但浮动没有 这里是 这是一个例子 http jsfiddle net v82ck http jsfiddle net v82ck 问题 悬停时菜单上的浮动属性不会改变 我希望每个菜单元素下方的线在悬停该菜单
  • KineticJS - 将舞台缩放到视口

    我正在努力将默认分辨率设置为 1366x756 我会根据视口来放大和缩小它 类似于此处显示的示例 http blogs msdn com b davrous archive 2012 04 06 modernizing your html5
  • Typeahead.js 干扰 Bootstrap 输入组

    如何防止 Typeahead js 拆分我的 Twitter Bootstrap 3 输入组 每当我将 Typeahead javascript 指向属于输入组一部分的文本区域时 连接的文本区域和提交按钮就会停止连接 这只是 Typeahe
  • 使用后代选择器的响应式网站

    我试图使用媒体查询使我的网站响应 但是当我在代码的某些部分使用后代选择器时 页面没有响应 当我使用此代码时 该页面是响应式的 div1 float left width 20 height 200px background color re
  • 如何将 default.html 的字符编码设置为 UTF-8?

    我花了几个小时来验证我的网站HTML 4 01 严格事实上我已经成功了 但仍然有一个警告我无法摆脱 警告是 字符编码不匹配 中指定的字符编码 HTTP 标头 iso 8859 1 是 与中的值不同 元素 utf 8 我将使用该值 来自 HT
  • addEventListener keydown 不起作用

    我在互联网上找到了一些基本的 Pong 代码 并尝试添加按键 代码在这里 http cssdeck com labs ping pong game tutorial with html5 canvas and sounds http css
  • 防止浏览器弹出警告窗口

    我正在尝试在新窗口中打开 jsp 页面 使用 JavaScriptwindow open产生浏览器警告 并且在某些情况下 firefox 将默认阻止弹出窗口 有没有办法解决这个问题 这不是恶意应用程序 它是内部用户工具 大多数浏览器不会阻止
  • 在浏览器中覆盖 TAB

    如果我在输入字段中输入文本并按ENTER我所知道的所有浏览器的默认行为是提交表单 但是如果我按ENTER在文本区域内添加新行 每当我按下时 有什么方法可以模仿这种行为 缩进 而不是提交表单 TAB在文本区域内 Bespin https be
  • 强制 PayPal 始终请求信用卡信息而不是登录表单?

    我们的网站采用贝宝付款标准 当用户在我们的网站上填写他们的请求并按下 PayPal 按钮 立即购买 时 我们会将所有变量提交给 PayPal 以便他们可以处理付款 对于那些以前从未使用过贝宝并通过我们的网站付款的用户来说 它运行得非常好 因
  • contenteditable,在文本末尾设置插入符号(跨浏览器)

    输出在Chrome div style border 1px solid 000 width 500px height 40px hey div what s up div div div div
  • 如何将水平 ul 列表中的项目与图像垂直对齐?

    我有以下 html 代码 div ul li a href index php site login About a li li a href index php site login FAQ a li li a href http twi
  • 有什么特别好的理由在 javascript 目标链接上继续使用 href='#' 吗?

    众所周知 像这样的代码是非常常见的 a href class edit Edit a 然后将其连接到事件处理程序 使用 jQuery 或当今流行的任何东西 甚至使用内联 js 处理程序 a href Edit a 我知道这是在链接上显示指针
  • 页面其余部分完成加载后延迟加载 html5 视频

    我有一个视频元素用作我正在构建的页面底部部分的背景 我试图通过将 src 存储为 data src 属性并使用 jQuery 在其他资源加载后将其应用到 src 属性 因为它不是英雄图像或任何东西 我想加载海报以节省加载时间 然后稍后加载视
  • 在 JavaScript 中引用 C# 变量

    我已经阅读了很多线程 但我不明白为什么这不起作用 我正在创建一个将用作导航栏的 SharePoint Web 部件 一切都很顺利 直到我尝试在 JS 代码中引用 C 变量 这是来自 VisualWebPart1UserControl asc
  • HTML 文本框,自动突出显示文本

    我将如何制作一个包含预先存在的文本的文本框 当用户在其中单击时 其中的所有文本都会突出显示 例如 YouTube 在其视频上使用嵌入代码的文本框的方式相同 谢谢 如果我正确理解你的问题 你可以使用一些javascript 未经测试的代码
  • 为什么-标签没有关闭

    这是一个普遍问题 我的教授都无法回答 为什么我不必关闭 HTML 中的标签 所有其他标签都必须关闭 例如 or 那么为什么不呢 首先 它根本不是一个标签 在名义上基于 SGML 或 XML 的 HTML 版本中 它是文件类型声明 它具有在

随机推荐

  • Linux服务器上top后发现僵尸进程的解决办法

    今天在熟悉Linux命令的时候 使用top查看服务器负载的时候 发现了zombie 简单理解成僵尸吧 这个参数 这个参数就代表僵尸进程的含义 什么是僵尸进程呢 这里盗用一下官方的解释 一个进程在调用exit命令结束自己的生命的时候 其实它并
  • 解决com.xpand依赖引入问题

    引言 starter canal实现了springboot与canal的集成 比原生的canal更加优雅 下载地址 https github com chenqian56131 spring boot starter canal 使用前需要
  • 一:计算机基础入门及介绍

    计算机基础入门篇 1 计算机系统 计算机 Conputer 俗称电脑 一种能接收和存储信息 并按照存储在其内部的程序对海量数据进行自动 高速的处理 然后把处理结果输出的现代化智能电子设备 计算机有很多的形式类型 例如 生活中常见的家用电脑
  • chrome误删收藏夹书签如何恢复?

    打开书签管理器 按下Ctrl Z 然后就恢复了
  • python与excel做数据可视化-Python的Excel操作及数据可视化

    Excel表操作 python操作excel主要用到xlrd和xlwt这两个库 即xlrd是读excel xlwt是写excel的库 安装xlrd pip install xlrd 简单的表格读取 import xlrd 读取表格 data
  • emmc分区创建脚本

    bin sh add a new primary partition Param PartNum 1 3 First cylinder Last cylinder add partition echo creat primary parti
  • 深入理解Go——反射reflect

    文章目录 反射使用常见场景 反射原理 反射的基本函数 反射使用常见场景 需要反射的 2 个常见场景 有时你需要编写一个函数 但是并不知道传给你的参数类型是什么 可能是没约定好 也可能是传入的类型很多 这些类型并不能统一表示 这时反射就会用的
  • MySQL 库操作

    目录 创建数据库 语法 案例 字符集和校验规则 建数据库 建表用 查看系统默认字符集以及校验规则 db opt 更改 查看数据库支持的字符集 查看数据库支持的字符集校验规则 校验规则对数据库的影响 排升序 操纵数据库 查看数据库 显示创建语
  • 数据结构与算法学习(day4)——解决实际问题

    前言 在本章的学习此前 需要复习前三章的内容 每个算法都动手敲一遍解题 宁愿学慢一点 也要对每个算法掌握基本的理解 前面我们学习了简化版桶排序 冒泡排序和快速排序三种算法 今天我们来实践一下前面的三种算法 本章的学习目标 1 回顾三个算法的
  • openwrt ttyd 不能使用(修改lan口地址后)

    修改lan口地址后openwrt ttyd会被拒无法使用 解决办法如下 1 ssh 到openwrt的终端 2 编辑ttyd的配置文件 vim etc init d ttyd 3 将配置文件如下代码注释 interface i interf
  • Get,Post请求中文乱码问题有效解决方法

    对于做Java WEB项目同学来说 中文乱码问题是一个经常遇到而又非常头痛的问题 而最容易出现乱码的环节就是在浏览器向服务器发送请求的过程 至于出现乱码的原因不是本文的关注的重点 想了解的朋友可以参考 http zhaomin819111
  • GitHub设置头像

    在 GitHub 上随处可见的头像 账户独有的标识 是通过 Gravatar服务显示的 只要使用创建 GitHub 账户时注册的邮箱在 Gravatar 上设置头像 GitHub 的头像就会变成您设置好的样子 http cn gravata
  • 华为OD机试 - 解密犯罪时间(Java)

    题目描述 警察在侦破一个案件时 得到了线人给出的可能犯罪时间 形如 HH MM 表示的时刻 根据警察和线人的约定 为了隐蔽 该时间是修改过的 解密规则为 利用当前出现过的数字 构造下一个距离当前时间最近的时刻 则该时间为可能的犯罪时间 每个
  • 深度学习中的IoU概念理解

    1 什么是IoU Intersection over Union IoU是一种测量在特定数据集中检测相应物体准确度的一个标准 IoU是一个简单的测量标准 只要是在输出中得出一个预测范围 bounding boxex 的任务都可以用IoU来进
  • Delphi中关于资源释放(Free,Relealse,FreeAndNil)

    根据日常编程经验 得出一些Delphi中关于资源释放的体会 假如有对象Obj为TObject类型 1 Obj Free直接释放资源后 调用OnDestroy事件 但是没有将Obj指针值置为Nil 2 Obj Release 等待资源不再使用
  • Kali proxychains

    1 什么是proxychains 在linux系统中有很多软件是不支持代理的 但是proxychains 却可以让不支持代理的软件 也能走代理通道 支持HTTP HTTPS SOCKS4 SOCKS5 等多种代理协议 而且还能配置代理链 可
  • struct和typedef struct的用法和区别

    1 在C和C 里的不同 在c中定义一个结构体类型用typedef typedef struct Student int m Stu 用这种形式定义的时候 在声明结构体变量的时候可用 Stu stu1 这种形式也等同于struct Strde
  • Open3D (C++) 点云添加随机噪声

    Open3D C 点云添加随机噪声 在三维点云数据中 噪声是不可避免的 它可能是由于传感器测量误差 环境因素或其他未知影响造成的 为了模拟这些噪声 我们可以使用 Open3D 中提供的工具将噪声添加到点云数据中 本文将介绍如何使用 Open
  • postgres导入备份出现'无效的命令\N'

    在使用pg dump对数据库进行备份的时候 到出成默认的格式 导致插入数据时 提示无效的命令 N 解决方法 使用custom格式导出 然后用pg restore导入 导出 pg dump F custom U username d dbna
  • 下拉框,文本域和文件域

    p 国家 p