<form>表单

2023-11-15

 

1.form表单

<form>标签是表单是一个框架,其中主要包含<input>,<textarea>,<select>标签

 

1.1<input>标签

<input>标签首先是一个单标签

<input>标签的格式是<input type="" value="" name="" >(如下图)

<input type="text" name="userName">

1.1.1

type用来设置 <input>标签的格式

type="text"-------------单行文本框

type="password"---------用于密码的输入(密码会被掩饰,看不到)

type="submit"-------------提交按钮

type="radio"---------单选按钮

type="checkbox" -----------多选按钮

type="button"--------普通的按钮(可赋予一些功能)

type="reset"----------复位按钮(相当于刷新页面,原本选择或写入的东西全部需要重新输入)

type="image"----------图像按钮(使用一张图片作为按钮,需注意图片的大小,慎用)

type="hidden"---------隐藏域(慎用)

type="file"----------文本域

type="email"-----需输入邮箱时使用

type="color"--------颜色

type="date"--------精确到今天的年月日

type="datetime-local'--------------精确到今天的几点几分

type="time" ---------显示当前的时间

type="number"--------------显示数字,并可以规定数字的取值范围。如<input type="number" max="10"  min="1">,表示数字范围从1到10

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<form>
		请输入用户名:<input type="text" name="userName"><br>
		密码:<input type="password" name="password"> <br>
		<input type="submit" value="提交"><br>
		<input type="radio" value="普通按钮">普通按钮<br>
		<input type="checkbox" name="like">写作
		<input type="checkbox" name="like">体育
		<input type="checkbox" name="like">听音乐
		<input type="button"><br>
		<input type="reset" name="复位"><br>
		<input type="image" src="./1.jpg"><br>
		<input type="file" name="文本域"><br>
		请输入邮箱<input type="email"><br>
		<input type="color" ><br>
		<input type="date">
		<input type="datetime">
		<input type="datetime-local"><br>
		请输入数字<input type="number" max="10" min="1">
	</form>
</body>
</html>

 

 

1.1.2

在<input>标签中,下列元素的具体用法如下

name------- 代表 元素的名称
value ----- 代表 元素的值
id -------- 表示 元素的唯一标识符
size -------- 以字符的个数设定元素的宽度
maxlength --------- 元素接受字符个数的上限
checked -------- 代表默认选中
readonly ---------- 表示 输入的字段仅仅是只读,不能做任何修改
disabled ------ 禁用 input 元素 ,表示该元素被固定, 不可用,也不可以点击
required------- 提交信息的时候,input不能为空 ,如果为空会有相关的提示
autofocus --------打开页面时,自动获取光标
placeholder-------元素显示在文本框中,不影响输入,一般用来提示输入的内容的要求或提示
 

1.1.3

select标签

<select>标签和<option>标签一起使用,设置下拉选择框

selected表示默认选择的元素

			<select >
					<option value="北京">北京</option>
					<option value="上海">上海</option>
					<option value="陕西" selected>陕西</option>
					<option value="四川">四川</option>
					<option value="重庆">重庆</option>
					<option value="河北">河北</option>
				</select>

1.1.4

<textarea>标签

该标签表示多行文本框,

cols----用字符个数限制多行文本框的宽度

rows----用字符个数限制多行文本框的高度

<textarea name="intro" cols="25" rows="5" placeholder="这家伙很懒什么也没留下!"></textarea>

 

 

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

<form>表单 的相关文章

  • 如何将div内容添加到jspdf中的新页面?

    如何将div内容添加到jspdf中的新页面 我尝试使用 br 它创建了一个新页面 但我看不到内容 div div style margin 3px 430px First Page div div Place content to Seco
  • 使用JQuery检查元素是否有边框?

    所以我正在玩 el css 尝试确定元素是否有边框 我用 css border style solid 设置边框 这是可行的 但实际上它设置了 4 种单独的样式 border right style border left style bo
  • 如何仅使用CSS设置某个角的边框半径

    如上所示 我可以只给顶部部分而不给底部提供半径 或者有时给底部而不是顶部提供半径吗 有没有办法只给一个角提供边界半径 Like border radius top left top right bottom right bottom lef
  • 如何在表格的 tbody/thead 部分周围创建边框?

    我正在尝试创建一个包含表格数据的页面 该页面必须显示为多个表格 然而 我有两个相互冲突的要求需要解决 每个表格周围都必须有边框 每个表格的列宽必须能够根据内容重新调整大小 但是 所有表中的列宽必须一致 即列的大小基于所有表中该列中最大的单元
  • HTML5 有效的命名空间标签前缀

    验证我的页面时 W3 Validator 会给我一个错误
  • div Hello div div Howdy dere pardner div div div 我明白它的作用 但为什么叫这个名字both 什么是both mean 两者的意思是 一组两件事中的每一项 左 和 右 两件事
  • 为什么我不能在 TCPDF 表中使用 č,ć,đ 图表?

    我正在为我的网站构建一个 tcpdf 文件 该 tcpdf 文件中有一个包含一些数据的表格 但我无法使该章程正常工作 对于编码 我使用 windows 1250 宪章女巫不起作用 我已经尝试过 utf 8 但仍然没有得到这个章程 tcpdf
  • 一个接一个地淡入div

    大家好 我很擅长 HTML 和 CSS 但才刚刚开始接触 jQuery 的皮毛 我希望让 3 个 div 在页面加载时逐渐淡入 到目前为止我有这个 我听说使用 css 将显示设置为 none 对于任何使用非 JavaScript 浏览器的人
  • 为什么我的图像下方有空间? [复制]

    这个问题在这里已经有答案了 图像在下面获得了神秘的空白空间 即使padding 0 margin 0被应用 示范 http jsfiddle net cLETP 红色边框应该包围图像 但底部有空间 造成这种情况的原因是什么 如何删除该空间
  • 更改javascript nodejs中所有页面的href url

    我已经实现了具有多种语言下拉菜单的引导导航栏 当我选择语言时 它将翻译页面 如何更改其他页面的 url 和按钮文本 当我选择french 将所有网址更改为 fr about and fr contact 如何使用 JavaScript 进行
  • 链接无效

    我正在尝试使用以下命令创建一组指向页面中特定部分的链接 a href 符号 但它似乎不起作用 点击链接似乎没有任何反应right click gt open in a new tab更改 url 但不会移动到页面的其他部分 我使用的是火狐浏
  • 在 HTML5 Javascript 中将 BlobBuilder 转换为字符串

    function blobToString blob var reader new FileReader var d reader onloadend function d callback reader result console lo
  • 网站在 iPhone 屏幕右侧显示空白区域

    我遇到问题http eiglaw com http eiglaw com iPhone 屏幕右侧显示约 25 像素宽的空白 边框 我在 stackoverflow 上研究了这个问题 这些帖子是相关的 但是当我尝试提供的各种解决方案时 我无法
  • 浮动图像周围具有最小列宽的流动文本

    我想要一种方法来防止流动文本列变得太窄 例如 在一列 HTML 文本中 有一个图像浮动到左侧 正如预期的那样 文本沿着图像周围的列的右侧向下流动 但是 如果图像几乎与列一样宽 则文本最终会非常窄 在这种情况下 我希望文本简单地not流过图像
  • VueJS 中数据无法正确显示

    我的 VueJS 代码有一个小问题 在 输出 压缩的 GS1 数字链接 URI 部分中 When there is no result it should have nothing display like this I have remo
  • 防止垃圾邮件按钮呼叫功能

    如何防止调用函数时出现垃圾邮件按钮 就像用户只能在按钮上每 1 秒调用一次该函数 有办法做到吗 因为我尝试了 setTimeout 但没有成功 它仍然在发送垃圾邮件 顺便说一句 我使用 Jquery 这是我的代码
  • 如何使用角度材料在具有可扩展行的表格中创建嵌套垫表

    我有以下数据 id c9d5ab1a subdomain wing domain aircraft part id c9d5ab1a info mimetype application json info dependent parent
  • 如何在模态打开时防止主体滚动

    我在用着W3schools 模态脚本 https www w3schools com howto tryit asp filename tryhow css modal我想添加一个功能 防止模型打开时整个主体滚动 我根据我的需要对原始脚本做
  • 使用 JavaScript 移动页面上的按钮

    我的按钮可以移动 但奇怪的是 我无法弄清楚偏移是否有问题 我希望我的按钮随着鼠标光标移动 但现在它的移动方式不是我想要的 有时它会消失 另外 创建的新按钮是重叠的 我不知道如何解决这个问题并拥有更好的外观 var coorA var coo
  • 主页(网格)上的缩略图现在显得模糊。如何纠正?

    我不知道这看起来是否愚蠢 但从早上开始我就无法纠正这个突然出现在我的博客网站上的错误www candidopinions in http www candidopinions in 我有一个网格视图模板 其中博客文章中的特色图像作为调整大小

随机推荐

  • Mybatis嵌套查询与嵌套结果

    一对多关系 一是用户 多是订单 实体类User public class User private Integer id private String name private Integer age private List
  • 后台获取前端提交数据的GET、POST方法遇到的问题

    在写代码的时候 总发现前端数据获取不到 最后发现了问题是因为get和post要一起出现 缺一不可 protected void doGet HttpServletRequest request HttpServletResponse res
  • JavaWeb之添加数据,显示到页面

    需求 从jsp页面添加一条记录到数据库 且显示到界面 分析 创建jsp页面 创建EmailServlet gt addEmail方法 设置请求编码 获取所有parameter的值 封装对象 调用addEmail方法 重定向到email sh
  • 游戏开发unity杂项知识系列:SetActive使用注意

    static public void SetActive GameObject go bool state if go null return if go activeSelf state go SetActive state 项目中类似上
  • JSP语法:setProperty

    JSP语法 13 setProperty 时间 2009 03 21 20 37 来源 作者 CSDN IE QQ 百度 Google POCO 新浪 365Key 天极 和讯 博拉 Live 奇客 收客 饭否 叽歪
  • 互联网未来发展方向

    都知道马云带来了互联网以及互联网的高潮 随着国家推动一带一路经济带 以及国内互联网大局的发展 很明显未来是互联网的天下 而互联网将来会怎样哪 第一 网购或者终端购物成为主流 随着经济发展 社会文明进步 智能制造 智能社会越来越凸显 智能手机
  • Python和C语言哪个难?零基础学哪个好?

    Python和C语言哪个难 零基础学哪个好 Python上手简单有交互性强的开发环境 还有众多的第三方库 学习起来会比C C 容易的多 C过于底层强在内存操作 功能实现起来却十分复杂并不适合新手作为上手语言 Python和C语言各有各的优势
  • Elastic Search 学习笔记

    来自尚硅谷 ES 教程 背景知识 从MySQL 到 ES 这一小节是我的一点点理解 如果有不对的话 欢迎指正 ES 是一个开源的高扩展的分布式全文搜索引擎 这样讲似乎还是有点抽象 那我们用一个更加熟悉的东西 MySQL来辅助理解 既然是搜索
  • 程序员技术面常用知识点

    转自 http blog csdn net qq 15437629 article details 52388685 在这里只做备份 计算机网络 TCP IP 模型 TCP IP协议集的分层实施 为什么要给网络划分层次 1 各层之间相对独立
  • 接口(interface)的实现

    接口 interface 的实现 usb插槽就相当于现实中的接口 其实现实生活和编程相对应的 即程序就是事件 1 java中的接口是怎么实现的呢 接口就是给出一些没有实现的方法 到了某个类要使用的时候就去实现他 语法 interface 接
  • Python多层字典取值

    usr bin python coding utf 8 author Bingo he file get target value py time 2017 12 22 def get target value key dic tmp li
  • 对于vue项目整理增删改查

    模板是来源于官方文档 清除tabledata里的模拟数据先
  • Pytorch相关操作(2)

    PyTroch相关操作 1 21 torch cuda Event 记录GPU的运行时间 start torch cuda Event enable timing True end torch cuda Event enable timin
  • Android Handler 的基本使用

    1 前言 https developer android google cn reference android os Handler html Handler 是 Android 中线程通信的常用方式 文档如是说 A Handler al
  • 【从零开始学c++】——string

    学好STL 一 STL简介 了解 1 什么是STL 2 STL的六大组件 3 STL的缺陷 2 string 1 string的简单了解 如何对stl的查阅 2 string常用接口说明 1 string类 对象常见的构造 2 string
  • Kotlin入门学习(非常详细),从零基础入门到精通,看完这一篇就够了

    文章目录 kotlin的历史 Kotlin的工作原理 语言类型 编译型 解释型 Java的语言类型 Kotlin的运行原理 创建Kotlin项目 语法 变量 变量的声明 基本类型 var和val的本质区别 函数 函数的声明 声明技巧 函数的
  • 找准边界,吃定安全

    创新的资源管理算法 基于会话的全分布式处理流程 山石网科全分布式架构 打破了传统架构的限制 找准边界 吃定安全 往期文章 从访问控制谈起 再看零信任模型 威胁情报加持 泛边界下的全局主动防御体系如何着手 随着 2019 年我国以信息网络等新
  • 连 连 看

    1 案例介绍 连连看是一款曾经非常流行的小游戏 游戏规则 点击选中两个相同的方块 两个选中的方块之间连接线的折点不超过两个 接线由X轴和Y轴的平行线组成 每找出一对 它们就会自动消失 连线不能从尚未消失的图案上经过 把所有的图案全部消除即可
  • C/C++之01背包问题

    问题描述 给定N个物品 每个物品有一个重量W和一个价值V 你有一个能装M重量的背包 问怎么装使得所装价值最大 每个物品只有一个 输入格式 输入的第一行包含两个整数n m 分别表示物品的个数和背包能装重量 以后N行每行两个数Wi和Vi 表示物
  • <form>表单

    1 form表单