HTML标签（二）中，有哪些不常见的标签用法？

2026-05-29 11:563阅读0评论SEO问题

内容介绍
文章标签
相关推荐

本文共计1319个文字，预计阅读时间需要6分钟。

/\/\*+ 作者：和尚老师 +\*\//\/\*+ csdn认证讲师 +\*\//\/\*+ 51cto高级讲师 +\*\//\/\*+ 腾讯课堂认证讲师 +\*\//\/\*+ 网易云课堂认证讲师 +\*\//\/\*+ 华为开发者学院认证讲师 +\*\//\/\*+ 爱奇艺千万人名讲师 +\*\//\/\*+ 在这里给家长分享技术、知识 +\*\/

/*
*作者：呆萌老师
*☑csdn认证讲师
*☑51cto高级讲师
*☑腾讯课堂认证讲师
*☑网易云课堂认证讲师
*☑华为开发者学堂认证讲师
*☑爱奇艺千人名师计划成员
*在这里给大家分享技术、知识和生活
*各种干货，记得关注哦！
*/

表单标签

表单: form:所有的表单元素都是放在form中提交到服务器端

属性: action:提交的页面地址

method:提交的方式

get:提交的内容都会通过url传递,不安全，传递的内容长度有限制

post:提交的内容会加密，通过正文传递，可以提交大量数据

表单元素:

1)输入框

《1》文本框：<input type="text" name="必须的" />

《2》密码框：<input type="password" name="必须的" />

《3》单选框：<input type="radio" name="必须的" />

注意：

同组的单选按钮名称(name) 必须相同，才能彼此互斥

《4》复选框：<input type="checkbox" />

《5》按钮：

普通按钮：<input type="button" />

重置按钮：<input type="reset" />

提交按钮：<input type="submit" />

图片按钮：<input type="image" src="图片的路径" />

注意：默认有表单提交功能的是： submit / image

《6》隐藏域：<input type="hidden" />

《7》上传文件：<input type="file" />

<input type="text" size="20" value="客户输入的值或者默认的值"/>

密码:<input type="password" value="123456"/>

性别:<input type="radio" name="sex" value="1" checked="checked"/>男

<input type="radio" name="sex" value="2"/>女

爱好:<input type="checkbox" value="1" checked="checked"/>吃饭

<input type="checkbox" value="2" checked="checked"/>睡觉

<input type="checkbox" value="3"/>打豆豆

上传控件:<input type="file"/>

隐藏框:<input type="hidden" value="商品id" />

<input type="submit" value="注册" />

<input type="reset" value="取消"/>

<input type="button" value="普通按钮"/>

图片提交按钮:<input type="image" src="img/27125326.jpg"

2) 多行文本框

下拉列表框

</select>

<select>

<option value="1">请选择</option>

<option selected="selected" value="2">你的妈妈叫什么名字?</option>

<option value="3">你的爸爸叫什么名字?</option>

<option value="4">你最喜欢的电影?</option>

</select>

下拉列表框可以设置为多选:

<select multiple="multiple" size="3">

<option value="1">请选择</option>

<option selected="selected" value="2">你的妈妈叫什么名字?</option>

<option value="3">你的爸爸叫什么名字?</option>

<option value="4">你最喜欢的电影?</option>

</select>

4) HTML 5 中扩展的表单标记

<1> <input type="tel" pattern="\d{8}" />

<2> <input type="email" />

<3> <input type="url" />

<4> <input type="color" />

<5> <input type="search" />

<6> <input type="number" />

<7> <input type="range" />

<9><input type="text" list="data2" />

</datalist>

颜色:<input type="color"/>

邮箱:<input type="email"/>

日期:<input type="date"/>

搜索:<input type="search" />

提示框<input type="text" list="data"/>

<datalist id="data">

<option>html5</option>

<option>html4</option>

</datalist>

5) HTML 5 中扩展的表单标记的属性

<1> 定义正则表达式： pattern="\d{8}"

<2> min="1" max="100" step="5"

<3> form="某个<form>标记的 ID属性" : 定义表单元素属于哪一个表单

<4> placeholder="请输入您的联系方式" : 文本框中的默认的灰色提示信息，用户输入时会自动消失

<5> required="required" : 用来定义表单元素为项

电话:<input type="text" pattern="\d{11}" />
用户名:<input type="text" required="required" placeholder="请输入用户名" />
<input type="submit" name="注册" disabled="disabled" />

更多了解

edu.51cto.com/course/20516.html

标签：html 标签二作者呆萌