HTML 表单控件

已于 2023-09-06 11:16:49 修改
阅读量2.3k 收藏 29
点赞数 1
分类专栏： Java web 文章标签： html html5
于 2021-08-16 19:11:43 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43914631/article/details/119730197
版权

标签

文件标签：构成html最基本的标签

html：html文档的根标签
head：头标签，用于指定html文档的一些属性，引入外部的资源
title：标题标签
body：体标签
<!DOCTYPE html>:html5中定义该文档是html文档

文本标签：和文本有关的标签

<h1> ~ <h6>:段落标签
<p>:段落标签
<br>：换行标签
<hr>：显示水平线corol：颜色 width：宽度  size：高度  align：对其方式（center居中，left，左对齐，right，右对齐）
<b>：加粗
<u>：下划线标签，在文字的下方有一条横线
<i>：斜体
<font>：字体标签（face：楷体，corol：颜色，size：大小）
<center>:文本居中
特殊字符

特殊字符，需要使用转义字符

在这里插入图片描述

图片、音频、视频标签

在这里插入图片描述

<img src="../img/a.jpg" width="300" height="400">
<audio src="b.mp3" controls></audio>
<video src="c.mp4" controls width="500" height="300"></video>

  • img：定义图片

    • src：规定显示图像的 URL（统一资源定位符）

    • height：定义图像的高度

    • width：定义图像的宽度

  • audio：定义音频。支持的音频格式：MP3、WAV、OGG

    • src：规定音频的 URL

    • controls：显示播放控件

  • video：定义视频。支持的音频格式：MP4, WebM、OGG

    • src：规定视频的 URL
    • controls：显示播放控件
超链接标签
<a href="https://www.itcast.cn" target="_self">点我有惊喜</a>

标签属性：

  • href：指定访问资源的URL

  • target：指定打开资源的方式

    • _self：默认值，在当前页面打开
    • _blank：在空白页面打开
列表标签

在这里插入图片描述

表格标签

  • table ：定义表格

    • border：规定表格边框的宽度

    • width ：规定表格的宽度

    • cellspacing：规定单元格之间的空白

  • tr ：定义行

    • align：定义表格行的内容对齐方式

  • td ：定义单元格

    • rowspan:规定单元格可横跨的行数

    • colspan:规定单元格可横跨的列数

  • th：定义表头单元格

布局标签

在这里插入图片描述
div标签 在浏览器上会有换行的效果，而 span 标签在浏览器上没有换行效果。

表单标签

表单：用于采集用户输入的数据的，用于和服务器进行交互

form:用于定义表单的，可以定义一个范围，范围代表采集用户数据的范围
属性：action：指定提交数据的URL
method：指定提交方式 get/post
表单项中的数据要想被提交：必须指定其name属性

<form action="#" method="get">
    用户名：<input name="username"><br>
    密码：<input name="password"><br>
    <input type="submit" value="登录">
</form>
get/post区别

get：请求的参数会在地址栏中显示、请求参数长度是有限制的、不安全
post：请求参数不会在地址栏中显示，会封装在请求体中、请求参数的长度是没有限制、比较安全

表单项标签

在这里插入图片描述

input：可以通过type属性值，改变元素展示的样式
type：属性

在这里插入图片描述

text：文本输入框（placeholder：给一个框u昂的提示信息、label可同步用户名和用户名输入框）

<label for="username">用户名：<input name="username" placeholder="请输入用户名" id="username">

label的for属性一般会和input的id属性值对应，如果对应了，则点击lable区域，会让input输入框获取焦点

password：密码输入框
radio：单选框（要想让多个单选框实现单选的效果，则多个单选框的name属性必须一样、一般会给每一个单选框提供value属性，指定其被选中后提交的值、当需要打开时默认选中则需要加checked属性）

性别：<input type="radio" name="gender" value="male"> 男
        <input type="radio" name="gender" value="female"> 女

checkbox:复选框（一般会给每一个单选框提供value属性，指定其被选中后提交的值、当需要打开时默认选中则需要加checked属性）checke="checked"指定默认值

爱好：<input type="checkbox" name="hobby" value="shopping"> 逛街
        <input type="checkbox" name="hobby" value="java" checke="checked"> java

file:文件选择框

图片：<input type="file" name="file">

hidden：隐藏域

隐藏域：<input type="hidden" name="id" value="aaa"><br>

submit：提交表单

<input type="submit" value="登录">

button：一个按钮

<input type="button" value="一个按钮">

image：图片提交按钮，可通过src属性指定图片的路径

<input type="image" src="图片路径">

color：取色器

<input type="color" src="color">

date：日期

<input type="date" name="birthday">

datetime：含有小时分钟的日期

<input type="datetime-local" name="birthday">

email：邮箱，可自动做一个基本校验

<input type="email" name="emile">

number：只能输入数字

<input type="number" name="age">
select：下拉列表 option:指定子列表项

name：可成功提交
value：对应提交后选中的值

省份：<select name="province">
    <option value="">请选择</option>
    <option value="1">陕西</option>
    <option value="2">上海</option>
</select>
textarea：文本域

cols：指定列数 rows：指定行数

输入一个五行，每行20个字符

</select>
    自我描述：<textarea cols="20" rows="5">
</textarea>
zgDaren
关注
  • 1
    点赞
  • 踩
  • 29
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
html表格控件tableview-1.1.2
09-20
html表格控件，带示例，使用方便，适合新手，不妨下来看看，jquery封装的方法，兼容性好。比较漂亮。
Html基本控件介绍
m0_68682235的博客
03-25 4828
1. <input>标签(行内元素) <input> 标签用于搜集用户信息。 ​ 1.text：文本区域 readonly属性：是否只读。 <input type="text" id="name" name="name"> 2.password：密码区域，输入的文本以'*'展示 <input type="password" id="password" name="password"> 3.checkbox：复选框 checked属性：是...
HTML5-新增表单控件
AIMing_byte的博客
12-28 470
如果要把datalist控件提供的下拉列表绑定到某个文本框中，则必须将文本框的 list 属性的值设定为该datalist控件的 id。for 属性描述了计算中使用的控件与计算结果之间的关系。for属性的值规定一个或多个控件的 Id列表，要求以空格分隔。datalist控件要与option控件配合使用，每个option控件都必须设置其 value 属性的值。概念：output控件用于定义表单元素的输出结果或计算结果，比如计算或脚本输出。概念：datalist控件为文本框提供一个预定义的下拉列表。
html中自动填写控件,HTML表单控件
weixin_34997870的博客
05-31 357
input元素无疑是一个庞大和复杂的元素，但它并不是唯一的表单控件。还有button、select、option、label、optgroup、textarea、fieldset、legend这八个传统表单控件，datalist、progress、meter、output、keygen这五个新增表单控件传统控件button  定义一个按钮select   定义一个下拉列表option  定义下拉列...
【HTML】HTML 表单 ① ( input 表单控件 | input 标签语法 | input 标签属性 | type 属性 | value 属性 | name 属性 | checked 属性 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
02-22 3556
一、HTML 表单 二、input 表单控件 1、input 标签语法 2、input 标签属性 3、type 属性 5、value 属性 6、name 属性 7、checked 属性
常用HTML表单控件
01-13
常用HTML表单控件 单行文本框： 密码文本框： 命令按钮： 提交命令按钮： 重置命令按钮： 文件上传输入： 文本区： 隐藏元素： 列表框： 单选按钮： 复选框：
html 表单控件
weixin_33724059的博客
03-18 275
form 表单，用于向其他页面传递数据。 一个例子 <form action="form_action.asp" method="get"> <p>First name: <input type="text" name="fname" /></p> <p>Last name: <...
HTML的表单控件
guiyuan_yelang的专栏
04-22 461
1. Text 定义用户可输入文本的单行输入字段。 Email: Pin: TIY   2. Button 定义可点击的按钮，但没有任何行为。button 类型常用于在用户点击按钮时启动 JavaScript 程序。 TIY 3. Submit 定义提交按钮。提交按钮用于向服务器发送表单数据。数据会发送到表单的 ac
HTML表单控件
web前端开发教程htmlcssjs
01-15 1569
input元素无疑是一个庞大和复杂的元素，但它并不是唯一的表单控件。还有button、select、option、label、optgroup、textarea、fieldset、legend这八个传统表单控件，datalist、progress、meter、output、keygen这五个新增表单控件 传统控件 button  定义一个按钮 select   定义一个下拉列表 option  ...
可编辑的 HTML JavaScript 表格控件 DataGrid
jordan119的专栏
05-31 2400
 可编辑的 HTML JavaScript 表格控件 DataGridhttp://www.w3.org/TR/html4/loose.dtd">无标题文档/* *================================================================================================================
HTML常用控件
12-24
HTML常用控件
使用css美化html表单控件详细示例(表单美化)
12-14
在input标签里设置type="submit"即可设置此表单控件为按钮。 submit按钮代码： 复制代码代码如下:<input name=”” type=”submit” value=”提交” /> submit按钮效果截图 html submit按钮效果截图 2、html...
html表单控件禁用属性readonly VS disabled介绍
01-21
在html中有两种禁用表单提交的方法，他们分别是：  1.给控件标签加\u4e0areadonly='readonly'属性  2.给控件标签加\u4e0adisabled='disabled'属性  例如:  <input type=text value= readonly=readonly />...
表单控件.html
01-10
表单控件
用html写一个旋转菜单
liulang68的博客
04-24 889
【代码】用html写一个旋转菜单。
HTML随机点名程序
m0_65992344的博客
04-22 653
HTML随机点名程序
用html画一个四叶草
liulang68的博客
04-20 1584
以上是部分代码，需要请看主页加联系方式。
在HTML中使用JavaScript实时显示当前日期和时间（结尾完整例程）
最新发布
weixin_67244432的博客
04-29 430
在Web开发中，经常需要在网页上显示当前的日期和时间。HTML本身并不具备这样的动态功能，但我们可以借助JavaScript来实现。JavaScript是一种常用的前端脚本语言，它可以轻松地获取系统时间，并将其插入到HTML元素中。现在，当您打开这个HTML页面时，它将实时显示当前的日期和时间，并且每秒都会自动更新。的JavaScript文件，并编写用于获取和格式化当前日期时间的函数。首先，我们创建一个HTML文件，并在其中添加一个用于显示日期和时间的。函数，以便实时更新显示的日期时间。
CSS中的圆角和阴影
小何代码咖啡馆
04-21 1028
在 CSS3 中，新增了圆角边框样式，这样我们的盒子就可以变圆角了。（必需值）水平阴影(horizontal shadow)，可以为负值。（必需值）水平阴影(horizontal shadow)，可以为负值。（必需值）垂直阴影(vertical shadow)，可以为负值。（必需值）垂直阴影(vertical shadow)，可以为负值。（可选值）将外（盒子的背面）阴影改为内（盒子之上）阴影。CSS3 中新增了盒子阴影，可以使用。属性为盒子添加阴影。（可选值）阴影模糊程度。（可选值）阴影模糊程度。
mxgraph 插入HTML5表单控件
06-09
mxGraph支持在标签中插入HTML5表单控件，例如文本框、下拉列表、按钮等。以下是一个例子，演示如何在mxGraph中插入HTML5表单控件： ```javascript // 创建一个矩形对象 var cell = new mxCell('', new mxGeometry(0, 0, 200, 100)); cell.setVertex(true); graph.getModel().beginUpdate(); try { var parent = graph.getDefaultParent(); var vertex = graph.addCell(cell, parent); // 设置标签为HTML graph.setCellStyles(mxConstants.STYLE_WHITE_SPACE, 'wrap', [vertex]); graph.setCellStyles(mxConstants.STYLE_FONTSIZE, '14', [vertex]); graph.setCellStyles(mxConstants.STYLE_FONTFAMILY, 'Arial', [vertex]); // 添加文本框 var input = document.createElement('input'); input.type = 'text'; input.style.width = '100%'; vertex.value.appendChild(input); // 添加下拉列表 var select = document.createElement('select'); select.style.width = '100%'; var option1 = document.createElement('option'); option1.text = 'Option 1'; var option2 = document.createElement('option'); option2.text = 'Option 2'; select.add(option1); select.add(option2); vertex.value.appendChild(select); // 添加按钮 var button = document.createElement('button'); button.innerHTML = 'Click Me'; button.style.width = '100%'; vertex.value.appendChild(button); } finally { graph.getModel().endUpdate(); } ``` 在上面的代码中，我们首先创建了一个矩形对象，并将标签设置为空字符串。接下来，我们使用 `setCellStyles` 方法将标签的样式设置为HTML格式，并设置了字体大小和字体系列。然后，我们使用原生JavaScript代码创建了一个文本框、一个下拉列表和一个按钮，并将它们添加到标签中。 需要注意的是，mxGraph中的标签并不是一个真正的HTML元素，而是一个虚拟的元素，因此我们无法直接将HTML元素添加到标签中。为了解决这个问题，我们可以使用 `vertex.value` 属性来获取标签的DOM元素，然后将HTML元素添加到其中。 在上面的例子中，我们使用了原生JavaScript的DOM操作来创建和添加HTML元素。您也可以使用jQuery等第三方库来简化代码。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

zgDaren

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值