<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>表单 的相关文章

  • window.alert() 之后无法编辑输入文本字段

    我有这个 Electron 应用程序 使用 NodeJS Bootstrap AngularJS 其中包含一些可以编辑的文本输入字段 我有一个触发 window alert 的按钮 触发后 文本输入字段将不再可编辑 单击应用程序的其他元素不
  • RowSpan 在 iTextSharp 中不起作用?

    我正在尝试将 Html 转换为 PDF 我正在使用 iTextSharp 我发现iTextSharp对CSS的支持不太好 事实上我认为 HtmlWorker 线程并不支持这一切 让我的问题更加复杂的是 iTextSharp 似乎也不支持 R
  • Bootstrap 4、导航栏固定顶部和其他粘顶元素

    这里是再现 https jsbin com lawafu edit html 输出 https jsbin com lawafu edit html output 这是一个错误吗 一个失误 一个问题 一个无法实现的想法 Before scr
  • 为什么 Chrome 中存在 Document.prototype.getElementsByName?

    我所知 getElementsByName是一个定义在中的函数HTMLDocument and HTMLDocument继承自Document and Document继承自Node 那为什么我能看到Document prototype g
  • 如何从网上获取源代码?

    我正在尝试从 Web 获取 HTML 源代码 我尝试这样做 u new URL url URLConnection con u openConnection con setRequestProperty User Agent Mozilla
  • 无法使用 Jsoup HTML 解析器 Java 实现某些功能

    我无法使用 Jsoup Java 库解析以下场景的一些文本 1 This is b My Text b some other b b text as well b b b non empty tag1 b other text 预期输出 s
  • iframe 内 Web 元素的 QuerySelector

    编辑 新标题 我正在寻找的是 iframe 内元素的 document querySelector 我已经用谷歌搜索了很多答案 最后我被难住了 我正在尝试在 iframe 内查询 我正在构建要在 Selenium 中使用的字符串选择器 通常
  • 从 HTML 文件输入中删除“所有文件”选项

    我在用
  • HTML5 - Canvas - 大图像优化

    我需要建立一个HTML5 canvas其中包含非常大的图像 可能高达 10 15MB 我的第一个想法是将图像分成几个块 这些块将在画布上水平移动时加载 对这个想法有什么想法吗 这是一件好事吗 也许我错过了一些已经实现的优化功能 你说得对 这
  • ckeditor 数据未通过 jQuery 验证进行验证

    我知道有很多关于此的问题 但我无法让它在我的一生中发挥作用 我尝试了几种解决方案 包括this http devlog waltercruz com usando ckeditor e jquery validate juntos 第二个答
  • “forms.ContactForm 对象”没有属性“hidden_​​tag”

    我正在尝试使用 Flask 创建联系表单 但在渲染页面时不断收到此错误 forms ContactForm object has no attribute hidden tag 这是我的文件 联系方式 html extends layout
  • 角度 ui-grid 自定义标题 html

    我正在尝试将 glyphicon glyphicon thlist 我可以单击并调用控制器函数 添加到默认标题的左侧 我采用了默认标头并尝试操纵它来执行此操作 默认标头位于 https raw githubusercontent com a
  • 如何使用 CSS 使表格中的分隔线/边框消失?

    我有一个简单的 HTML 表格 我希望分隔线 边框 消失 所需的最终结果是一个除了实际文本之外不可见的表格 我尝试将 border 属性设置为 0 但没有帮助 我应该使用什么正确的 CSS 属性 table tr td th border
  • 跟踪 HTML5 音频元素的播放次数?

    跟踪 HTML5 音频元素播放次数的最佳方法是什么 我们也可以使用 Google Analytics 如果这是最好的方法 HTML5 音频元素有基本的回调 https developer mozilla org En Using audio
  • 文本溢出上的点样式:省略号

    是否可以对点进行样式设置text overflow ellipsis 一个例子是将省略号加粗 如 Lorem Ips 灵感来自这个答案 https stackoverflow com a 21861334 3244925 这是一种设置省略号
  • Python Flask 不更新图像[重复]

    这个问题在这里已经有答案了 这里有一些关于图像的 Flask 问题 但没有一个能解决我的问题 我有一个应用程序可以创建图像 保存它 然后显示它 一次 它应该多次执行此操作 每次更改图像时 它应该加载新图像 它不是 它只显示与其显示的文件名关
  • localhost/test.php 不返回任何内容

    我正在遵循教程构建一个网络应用程序 我创建了一个简单的test php网络空间中的文件 var www html 问题是当我输入localhost test php在浏览器地址窗口中 它返回一个空页面 我试过localhost php in
  • AngularJs:当放置在 ng-view 标签内时,ng-include 不起作用

    我正在通过 ng view 内的角度路线加载 html 页面 我正在加载的页面包含一个 ng include 标签 指向 另一个 html 文件 我尝试了以下所有语法 div src div div div div src include
  • 如何检索 JQuery 数据表的排序状态

    我对 JQuery Datatables 还很陌生 我正在尝试检索有关数据表的两个信息 当前正在对哪个列索引进行排序 也称为选择 排序顺序 升序或降序 不知道我应该如何解决这个问题 使用 jquery 查找列索引 或者 Datatables
  • 删除已从另一个下拉菜单中选择的下拉值

    我在网上搜索了一段时间 但仍然找不到答案 我的网站上有三个下拉菜单 我使用它们来接受用户首选项 以便用户可以控制结果的输出 所以我想知道如果在其中一个下拉列表中选择了该值 是否可以从其他两个下拉列表中取出该值 例如 如果用户在第一个电影中选

随机推荐

  • 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表单