阿卡不拉

Appearance

表单元素 ​

一系列元素，主要用于收集用户数据

input 元素 ​

输入框元素，是表单中最重要和最常用的元素

type 属性：输入框类型 ​

文本输入 ​

  • type="text"：普通文本输入框
html
<input type="text" placeholder="请输入账号" />
  • type="password"：密码框，输入内容会被隐藏
html
<input type="password" placeholder="请输入密码" />
  • type="search"：搜索框，在移动端可能显示搜索键盘
html
<input type="search" />

数值和范围 ​

  • type="number"：数字输入框，支持 min、max、step 属性
html
<input type="number" min="0" max="100" step="20" />
  • type="range"：滑块控件，用于选择数值范围
html
<input type="range" min="0" max="5" />

日期和时间 ​

  • type="date"：日期选择框（存在兼容性问题）
html
<input type="date" />

颜色和文件 ​

  • type="color"：颜色选择器
html
<input type="color" />
  • type="file"：文件选择框
html
<input type="file" />

复选框和单选 ​

  • type="checkbox"：多选框，同一组需要相同的 name 属性
html
爱好： <input name="loves" type="checkbox" /> 音乐
<input checked name="loves" type="checkbox" /> 电影
<input name="loves" type="checkbox" /> 阅读
  • type="radio"：单选框，同一组必须有相同的 name 属性
html
性别： <input name="gender" type="radio" /> 男
<input checked name="gender" type="radio" /> 女

按钮（推荐使用 button） ​

  • type="submit"：提交按钮
  • type="reset"：重置按钮
  • type="button"：普通按钮
  • type="image"：图像按钮
html
<input type="submit" value="这是一个提交按钮" />
<input type="image" src="hashiqi.jpg" />

常用属性 ​

  • value：输入框的值
  • placeholder：占位符文本，当输入框为空时显示
  • name：表单控件的名称，提交时作为数据的键名
  • checked：用于 checkbox 和 radio，表示默认选中
  • min/max：用于 number 和 range，设置最小值和最大值
  • step：用于 number 和 range，设置步长

select 元素 ​

下拉列表选择框，用于提供多个选项供用户选择

基本用法 ​

通常和 option 元素配合使用：

html
请选择城市：
<select>
  <option>成都</option>
  <option>北京</option>
  <option selected>哈尔滨</option>
</select>

选项分组 ​

使用 optgroup 元素对选项进行分组：

html
请选择你最喜欢的主播：
<select>
  <optgroup label="才艺表演">
    <option>冯提莫</option>
  </optgroup>
  <optgroup label="游戏主播">
    <option>WETed</option>
    <option>infi</option>
    <option>th000</option>
  </optgroup>
</select>

多选模式 ​

使用 multiple 属性允许多选：

html
请选择你喜欢的主播：
<select multiple>
  <optgroup label="才艺表演">
    <option>冯提莫</option>
  </optgroup>
  <optgroup label="游戏主播">
    <option>WETed</option>
    <option>infi</option>
    <option>th000</option>
  </optgroup>
</select>

常用属性 ​

  • name：表单控件名称
  • multiple：允许多选
  • size：显示的选项数量
  • selected：option 元素的属性，表示默认选中
  • value：option 元素的属性，选项的值

textarea 元素 ​

文本域，多行文本框，用于输入大量文本内容

基本用法 ​

html
请填写简介：
<textarea style="width:500px;height:300px;" placeholder="请输入简介"></textarea>

常用属性 ​

  • rows：显示的行数
  • cols：显示的列数
  • placeholder：占位符文本
  • name：表单控件名称
  • maxlength：最大字符数限制
  • wrap：文本换行方式（soft/hard）

按钮元素 ​

button 元素是创建按钮的推荐方式，比 input 按钮更灵活

type 属性 ​

  • submit：提交按钮（默认值）
  • reset：重置按钮
  • button：普通按钮

基本用法 ​

html
<button type="button">这是一个按钮</button>

按钮内容 ​

button 元素可以包含丰富的内容，不仅仅是文本：

html
<button>
  <img src="hashiqi.jpg" alt="" style="width:150px;" />
  <p>Lorem ipsum dolor sit.</p>
</button>

与 input 按钮的区别 ​

  • button 元素可以包含任意 HTML 内容
  • input 按钮只能显示纯文本
  • button 语义更清晰，推荐使用

表单状态 ​

表单元素有两个重要的状态属性，用于控制用户交互：

readonly 属性 ​

  • 布尔属性，表示表单元素为只读状态
  • 不会改变表单显示样式
  • 用户无法修改内容，但可以选中和复制
  • 表单提交时会包含该元素的值
html
<input type="text" value="aaaaa" readonly />

disabled 属性 ​

  • 布尔属性，表示表单元素被禁用
  • 会改变表单显示样式（通常变灰）
  • 用户无法与元素交互
  • 表单提交时不会包含该元素的值
html
<input disabled value="AK" type="text" /> <button disabled>提交修改</button>

配合表单元素的其他元素 ​

label 元素 ​

标签元素，用于为表单控件提供说明文字，提高可访问性和用户体验

显式关联 ​

通过 for 属性关联表单元素，for 属性值为表单元素的 id：

html
<label for="username">用户名：</label>
<input type="text" id="username" name="username" />

隐式关联 ​

将表单元素包含在 label 元素内部：

html
<label>
  <input name="gender" type="radio" />
  男
</label>
<label>
  <input name="gender" type="radio" />
  女
</label>

label 的优势 ​

  • 点击 label 文字可以激活关联的表单控件
  • 提高可访问性，屏幕阅读器可以正确读取
  • 扩大了表单控件的点击区域

datalist 元素 ​

数据列表，为输入框提供预定义的选项列表

基本用法 ​

html
请输入你常用的浏览器：
<input list="userAgent" type="text" />

<datalist id="userAgent">
  <option value="Chrome">谷歌浏览器</option>
  <option value="IE">IE浏览器</option>
  <option value="Opera">欧鹏浏览器</option>
  <option value="Safari">苹果浏览器</option>
  <option value="Fire fox">火狐浏览器</option>
</datalist>

特点 ​

  • datalist 元素本身不会显示在页面上
  • 通过 input 的 list 属性与 datalist 的 id 关联
  • 用户可以从列表中选择，也可以输入自定义内容

form 元素 ​

表单容器，用于组织和提交表单数据

基本用法 ​

html
<form action="https://www.baidu.com/" method="GET">
  <p>
    账号：
    <input type="text" name="loginid" />
  </p>
  <p>
    密码：
    <input type="password" name="loginpwd" />
  </p>
  <p>
    城市：
    <select name="city">
      <option value="1">成都</option>
      <option value="2">重庆</option>
      <option value="3">北京</option>
      <option value="4">哈尔滨</option>
    </select>
  </p>
  <p>
    <button type="submit">提交</button>
  </p>
</form>

常用属性 ​

  • action：表单提交的目标 URL
  • method：提交方式（GET/POST）
  • enctype：编码类型（用于文件上传时）
  • target：提交结果的显示位置

注意事项 ​

  • form 元素对开发静态页面没有实际意义
  • 主要用于与服务器交互的动态网页
  • 表单提交时会收集内部所有有 name 属性的表单控件的值

fieldset 元素 ​

表单分组元素，用于将相关的表单控件组织在一起

基本用法 ​

html
<fieldset>
  <legend>账号信息</legend>
  <p>
    用户账号：
    <input type="text" value="aaaaa" readonly />
  </p>
  <p>
    用户密码：
    <input type="password" />
  </p>
</fieldset>

<fieldset>
  <legend>基本信息</legend>
  <p>
    用户姓名：
    <input disabled value="袁进" type="text" />
  </p>
  <p>
    城市：
    <select disabled>
      <option>成都</option>
      <option>重庆</option>
    </select>
  </p>
</fieldset>

特点 ​

  • legend 元素用于为分组提供标题
  • 自动添加边框样式，视觉上区分不同组
  • 可以对整个分组应用 disabled 属性
  • 提高表单的语义化和可访问性