form标签下的type属性的属性值演示

最新推荐文章于 2022-12-05 11:26:38 发布
最新推荐文章于 2022-12-05 11:26:38 发布
阅读量685 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： html 文档 标签 编码 语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/ppapplezero/article/details/73554687
本文档通过实例展示了HTML的基本结构及元素使用方法，包括超链接、锚点、表单输入元素如隐藏域、文件上传、单选按钮、复选框等，并演示了如何设置图像映射实现不同区域的链接跳转。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<a href="http://www.baidu.com">百度</a>


<a href="04.html">01.html</a>
<br>
<a href="#bottom">跳转到底线</a>
<div style="height: 1000px;"></div>
<a href="##" name="bottom">我是底线</a>
</body>

</html>


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<form>
<input type="hidden" name="yourid" value="姓名">
<input type="file" name="yourfile"size="30"><br>
a: <input type="radio" name="checkit" value="a" checked>
<br>
b: <input type="radio" name="checkit" value="b">
<br>
c: <input type="radio" name="checkit" value="c">
<br>
<input type="image" src = "hongxin.jpg" alt="爱心" width="300" height="300">
<map name="demo-test" id="demo-test">
<br>
a:<input type="checkbox" name="checkit" value="a" checked>
<br>
b:<input type="checkbox" name="checkit" value="b">
<br>
c:<input type="checkbox" name="checkit" value="c">
<br>
</form>
</body>
</html>



<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<a href="http://www.baidu.com">百度</a>


<a href="04.html">01.html</a>
<br>
<a href="#bottom">跳转到底线</a>
<div style="height: 1000px;"></div>
<a href="##" name="bottom">我是底线</a>
</body>
</html>




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<img src="hongxin.jpg" alt="爱" width="720" height="600" usemap="#demo-test">
<map name="demo-test" id="demo-test">
<area shape="rect" coords="0,0,50,50" href="http://www.baidu.com" alt="">


<area shape="circle" coords="200,200,50," href="http://www.baidu.com" alt=""
</map>


</body>
</html>






ppapplezero
关注
H5增强表单input标签、数据列表和属性
YY的博客
09-21 1221
H5增强表单input标签、数据列表和属性
表单form新增的type属性
xqiitan的专栏
02-16 3276
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;表单新增的type属性&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;form action="test
input表单type属性值
weixin_30916125的博客
01-29 482
<!-- input表单type属性值： --> <!-- type = "email" 限制用户输入必须为Email类型 --> email<input type="email"> <!-- type="url"限制用户输入必须为URL类型 --> url<input type="url"> <!-- t...
html表单的type属性
ailw92114的博客
04-04 768
input type属性 Input表示Form表单中的一种输入对象，其又随Type类型的不同而分文本输入框，密码输入框，单选/复选框，提交/重置按钮等， 下面一一介绍。 type=text 输入类型是text，这是我们见的最多也是使用最多的，比如登陆输入用户名，注册输入电话号码，电子邮件，家庭住址等等。当然这也是Inp...
表单新增加的type属性
yibashou的博客
08-07 543
表单的输入类型 email： 输入email格式 tel： 手机号码  url： 只能输入url格式 number： 只能输入数字 search： 搜索框 range： 范围，可以进行拖动，通过value进行取值 color ：拾色器，通过value进行取值 time      ：时间 date： 日期 不是绝对的 datetime： 时间日期 month： 月份 week...
HTML学习笔记-表单项标签type属性值
qq_44653420的博客
12-04 4579
表单项标签type属性值 text 普通文本框 password 密码框 email 邮箱框，简单验证 radio 单选框 选项必须有相同的Name属性值，value属性设置实际提交的值。checked属性代表默认选中 checkbox 复选框，选项必须有相同的name属性值，value属性设置实际提交的值，checked属性代表默认选中 date 日期框 time 时间框 datetime-local 时间日
PHP用正则匹配form表单中所有元素的类型和属性值实例代码
10-20
以下是一个简单的PHP代码示例，演示如何利用正则表达式匹配并打印出form表单中所有input标签的type属性值： ```php $htmlContent = '...'; // 这里是通过OCR扫描或人工输入获取的网页源代码 $pattern = '/*type=[...
JavaScript获取网页表单action属性的方法
10-24
以下是一个JavaScript代码示例，演示了如何输出表单的action属性值： ```javascript document.write(document.getElementById("frm1").action); ``` 这段代码通过`document.getElementById()`方法获取了id为"frm...
jquery自定义属性(类型/属性值)
10-27
文档中的表单使用`<form>`标签创建，并通过`id`属性来标识，使得jQuery能够轻松地选择和操作表单元素。表单元素如`<select>`下拉菜单、`<input>`文本输入框和`<button>`按钮被使用来接收用户的输入和指令，这些都是...
JavaScript获取表单enctype属性的方法
10-24
获取到enctype属性值后，我们可以在JavaScript中根据属性值进行不同的处理逻辑，如在表单数据发送前进行特定的编码处理，或者根据不同的编码类型执行不同的提交逻辑。 在实际开发中，了解如何操作和获取表单属性是...
HTML5新增常用标签、表单type属性值、表单属性、表单标签
少可爱
07-28 826
一、HTML5的语法 1、内容类型（ContentType） HTML5的文件扩展符与内容类型保持不变，仍然为".html"或".htm" 2、DOCTYPE声明 <!DOCTYPE html>不区分大小写； 3、指定字符集编码 <meta charset="UTF-8"> 4、可省略标记的元素不允许写结束标记的元素：br、col、embed、hr、img、input、link、meta ...
input type 介绍
田军的专栏
11-19 1663
Input表示Form表单中的一种输入对象，其又随Type类型的不同而分文本输入框，密码输入框，单选/复选框，提交/重置按钮等，下面一一介绍。1，type=text 输入类型是text，这是我们见的最多也是使用最多的，比如登陆输入用户名，注册输入电话号码，电子邮件，家庭住址等等。当然这也是Input的 默认类型。 参数name：同样是表示的该文本输入框名称。 参数size：输入框的...
H5新增表单属性form属性（type属性）
qq_43675509的博客
09-24 1683
H5新增的input类型 <form> 邮箱：<input type="email"><br/> 数量：<input type="number" value="20" max="25" min="18"><br/> 电话：<input type="tel"><br/&g...
html:form表单的常用标签以及属性和html5新增的form的type属性值以及属性
YangLu888
10-02 8759
html表单form的常用标签以及属性和html5的新增属性
表单标签属性
2202_75549187的博客
12-05 2216
表单标签属性
from属性
m0_61464384的博客
03-02 453
1.action指定表单的发送地址 2. method是表单数据发送至服务器的方法，常用的有两种：get、post， 用的input 的type属性值是submit，“提交”是这个按钮value属性的默认值 3. get和post的区别：get方法提交，数据会附在网址之后主动提交给服务器post方法提交数据不会附在网址后，会将数据打包发送给服务器，等候服务器来读取数据进行处理 4.在 新窗口打开 ，只需要将 target 的 属性 设置为_blank 5.Input元素属性： （1） ...
HTML中From表单的常用type属性及用法【较全】
NeiHan2020的博客
03-29 4219
目录 1.文本框 2.密码框 3.单选按钮 checked 4.复选框 checked 5.列表框 selected 6.按钮 7.文本域 8.文件域 9.自带验证功能 邮箱 网址 数字 10.滑块 11.search搜索框 12.隐藏域 13.只读与禁用 14.标注 15.验证 1.文本框 姓名:<input type="text" name="userName" maxlength="6"/> 2.密码框 密码:<i...
表单form的type种类
weixin_33835690的博客
03-26 8762
Form表单主要用于用户与Web应用程序进行数据的交互，它允许用户将数据发给web应用程序，网页也可以拦截数据的发送以便自己使用。form通常由一到多个表单元素组成，这些表单元素是单行/多行文本框，下拉菜单，按钮，复选框，单选按钮，时候表单元素时一般要配合label标签，用于描述其目的。先讲讲关于form表单的type的属性值有哪些：In...
Form表单中的一种输入对象Input的不同类型
xiaozhupiggg的专栏
06-23 1145
Input表示Form表单中的一种输入对象，其又随Type类型的不同而分文本输入框，密码输入框，单选/复选框，提交/重置按钮等，下面一一介绍。1，type=text输入类型是text，这是我们见的最多也是使用最多的，比如登陆输入用户名，注册输入电话号码，电子邮件，家庭住址等等。当然这也是Input的默认类型。参数name：同样是表示的该文本输入框名称。参数size：输入框的长度
option标签的value属性
最新发布
04-28
### HTML `<option>` 标签 `value` 属性的作用及用法 #### 一、基本概念 `<option>` 标签的 `value` 属性用于定义当表单提交时，该选项对应的值会被发送到服务器。这一属性的主要功能在于区分用户界面上展示的内容与实际传递的数据[^1]。 例如，在以下代码中： ```html <select> <option value="volvo">Volvo XC90</option> <option value="saab">Saab 95</option> </select> ``` - 用户在页面上看到的是 “Volvo XC90” 和 “Saab 95”，这是由 `<option>` 标签内的文本决定的。 - 当用户选择了某个选项并提交表单时，“volvo” 或 “saab” 将作为对应选项的实际值被发送至服务器[^3]。 #### 二、未指定 `value` 属性的情况 如果 `<option>` 标签中没有显式声明 `value` 属性，则默认情况下，`<option>` 标签内部的文本内容将作为提交给服务器的值。例如： ```html <select> <option>Apple</option> <option>Banana</option> </select> ``` 在这种情形下，假如用户选择了 “Banana”，那么字符串 “Banana” 就会成为提交给服务器的值。 #### 三、应用场景分析 1. **减少数据冗余** 使用 `value` 属性可以帮助开发者精简传输数据量。比如，通过设定较短的代号（如字母或数字），可以替代较长的文字说明来降低网络负载[^1]。 2. **解决字符集问题** 对于包含特殊字符或者非拉丁文字的语言环境来说，利用 ASCII 字符串或者其他编码方式表达的信息能够有效规避因字符集差异引发的问题[^1]。 3. **增强灵活性** 如果未来需要调整前端显示名称而不影响后端逻辑处理的话，只需改变 `<option>` 中间的文本即可完成更新操作，无需改动任何服务端代码。 4. **脚本交互支持** JavaScript 能够轻松读取和修改 `value` 属性及其关联的 `text` 属性，从而实现动态生成菜单条目等功能[^2]。 #### 四、实例演示 下面是一个完整的例子展示了如何运用 `<option>` 的 `value` 属性构建一个简单的汽车品牌选择器，并将其结果打印出来： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Select Example</title> </head> <body> <form id="carForm"> Choose your car brand: <select name="cars" id="carsSelect"> <option value="volvo">Volvo XC90</option> <option value="saab">Saab 95</option> <option value="mercedes">Mercedes SLK</option> <option value="audi">Audi TT</option> </select><br><br> <button type="button" onclick="showSelected()">Submit</button> </form> <p id="output"></p> <script> function showSelected() { var selectElement = document.getElementById("carsSelect"); var selectedValue = selectElement.value; document.getElementById("output").innerHTML = "You chose the car with code: " + selectedValue; } </script> </body> </html> ``` 在这个案例里，无论用户看见何种车型描述，最终返回的结果都是基于预先配置好的缩写形式[^4]。 --- ###
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值