🟡HTML基础标签

全局属性

属性	描述
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

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

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

🍌元素属性

📌name

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

<input />标签

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

🥝type属性

📌button

value设置控件提示

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

📌checkbox

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

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

吃饭

睡觉

📌file

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

📌hidden

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

📌image

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

📌password

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

📌radio

<input type="radio" name="radioo" />是
<input type="radio" name="radioo" />否

是

否

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

📌reset

<input type="reset" />

重置表单

📌submit

<input type="submit" />

用于表单的提交

📌text

<input type="text" />

默认的样式

📌date H5

<input type="date" />

📌datetime H5

<input type="datetime" />

📌datetime-local H5

<input type="datetime-local" />

📌month H5

<input type="month" />

📌week H5

<input type="week" />

📌time H5

<input type="time" />

📌color H5

<input type="color" />

📌url H5

<input type="url" />

📌email H5

<input type="email" />

🥝value属性

表单Demo

<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 表单 (w3school)》