🟡HTML基础标签

本文最后更新于:2022年4月8日 晚上

全局属性

属性 描述
class
id id
lang 内容语言
style 行内样式
title 鼠标悬停提示信息
dir 内容文本方向
tabindex tab键次序
accesskey 元素快捷键
contenteditable H5 元素是否可编辑
data-xxx H5 自定义属性
translate H5 是否翻译此元素
spellcheck H5 是否进行语法检查
draggable H5 元素是否可拖动
dropzone *H5 拖动方式
hidden H5 是否隐藏元素
contextmenu *H5 定义菜单

表单标签

<form>标签

该标签用于组合表单元素

🍌action

表单提交地址,默认为当前页

🍌method

设置请求方式,默认GET

🍌target

设置结果显示的页面

🍌autocomplete

1
2
3
<form autocomplete="on | off">
<!-- ... -->
</form>

是否记录保存用户的输入并用于之后的自动输入,默认打开

🍌元素属性

📌name

设置name属性的表单数据才能被发送

<input />标签

<input/>为行内替换元素可设置宽高

🥝type属性

📌button

value设置控件提示

1
<input type="button" value="按钮" name="button"/>

📌checkbox

默认会换行,value属性设置勾选后采集到的数据

1
2
<input type="checkbox" name="check1" />吃饭
<input type="checkbox" name="check2" />睡觉

吃饭

睡觉

📌file
1
<input type="file" name="file" />

📌hidden
1
<input type="hidden" name="hidden" />

📌image
1
<input type="image" name="img" />

📌password
1
<input type="password" name="psw" />

📌radio
1
2
<input type="radio" name="radioo" />
<input type="radio" name="radioo" />

单选项效果需设置相同的name属性才生效

📌reset
1
<input type="reset" />

重置表单

📌submit
1
<input type="submit" />

用于表单的提交

📌text
1
<input type="text" />

默认的样式

📌date H5
1
<input type="date" />

📌datetime H5
1
<input type="datetime" />

📌datetime-local H5
1
<input type="datetime-local" />

📌month H5
1
<input type="month" />

📌week H5
1
<input type="week" />

📌time H5
1
<input type="time" />

📌color H5
1
<input type="color" />

📌url H5
1
<input type="url" />

📌email H5
1
<input type="email" />

🥝value属性

表单Demo

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<form action="" method="get" name="form">
<fieldset>
<legend>会议发起人信息</legend>
<label for="name">姓名</label>
<input type="text" name="name" id="name" placeholder="请输入昵称" />
<label for="phone">电话</label>
<input type="tel" name="phone" id="phone" placeholder="请输入手机号" />
<label for="email">邮箱</label>
<input type="email" name="email" id="email" placeholder="请输入邮箱" />
</fieldset>
<fieldset>
<legend>会议规划</legend>
<label for="start">开始时间</label>
<input type="datetime-local" name="start" id="start" />
<label for="end">结束时间</label>
<input type="datetime-local" name="end" id="end" />
<br />
<label for="place">地点</label>
<input type="text" name="place" id="place" placeholder="请输入地点" />
<label for="people">人数</label>
<input type="number" name="people" id="people" placeholder="请输入人数" />
<br />
<label for="theme">会议主题</label>
<input type="checkbox" name="theme" id="theme">任务分发
<input type="checkbox" name="theme">工作报告
<input type="checkbox" name="theme">工作计划
<input type="checkbox" name="theme">工作总结
<input type="checkbox" name="theme">工作交接
<br />
<label for="content">内容概要</label>
<br />
<textarea name="content" id="content" placeholder="请输入内容"></textarea>
<br />
<label for="adjunt">添加附件说明</label>
<input type="file" name="adjunt" id="adjunt">
</fieldset>
<fieldset>
<legend>其他</legend>
<label for="must">是否接受请假</label>
<input type="radio" name="must" id="must" value="true">
<input type="radio" name="must" value="false">
</fieldset>
<input type="submit" value="发起会议" />
<input type="reset" value="清空表单" />
</form>
会议发起人信息
会议规划

任务分发工作报告工作计划工作总结工作交接


其他

🟡HTML基础标签
https://qingshaner.com/HTML1/
作者
清山
发布于
2022年2月4日
许可协议