HTML（二）

思维导图

form标签

表单控件

input

表单元素

• text：文本框

  <input type="text" name="姓名" maxlength="20" placeholder="请输入姓名">

• password：密码框

  <input type="password" name="密码" maxlength="20" placeholder="请输入密码">

• radio：单选按钮

  <input type="radio" name="性别" value="男">男性
  <input type="radio" name="性别" value="女">女性

• checkbox：复选框

  <input type="checkbox" name="爱好" value="CTF" checked>CTF
  <input type="checkbox" name="爱好" value="前端开发">前端开发
  <input type="checkbox" name="爱好" value="挖洞">挖洞
  <input type="checkbox" name="爱好" value="渗透">渗透
  <input type="checkbox" name="爱好" value="逆向">逆向
  <input type="checkbox" name="爱好" value="Web程序设计">Web程序设计

• select：列表框

  <select name="grade">
      <option value="2021" name="年级">2021</option>
      <option value="2020" name="年级" selected>2020</option>
      <option value="2019" name="年级">2019</option>
      <option value="2018" name="年级">2018</option>
  </select>

• button：按钮

  <!-- value中的内容为按钮上显示的文字 -->
  <input type="reset" (重置按钮) name="butReset"  value="reset">
  <input type="submit"(提交按钮) name="butSubmit" value="submit">
  <input type="button"(普通按钮) name="butButton" value="button"/>

• textarea：多行文本域

  <textarea name="个人描述" maxlength="100" placeholder="请用不多于100字描述你自己" rows="5" cols="20"></textarea>

• file：文件域

  <input type="file" name="简历">

• image：图像

  <!-- 图片按钮 -->
  <input type="image" src="图片路径">

• email：邮箱

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

• url：网址

  <input type="url"（网址）  name="userUrl"/>

• number：数字

  <input type="number" name="num" min="0" max="100" step="10"/>

• range：滑块

  <input type="range" name="range1" min="0" max="10" step="2"/>

• search：搜索框

  <input type="search" name="sousuo"/>

• data：日期

  <input type="date" name="depart"/><br/>
  <input type="date" name="arrival"/><br/>

• fieldset+label：组合组件

  • 如果一个表单上有很多信息需要填写，可以使用 fieldset控件将相关的元素组合在一起，使表单更容易理解。表单越容易理解，访问者就越有可能正确地填写表单。
  • 为了识别每个 fieldset控件的作用，还可以使用 legend元素为每个 fieldset控件提供一个标题（caption），用于描述每个组的目的。legend元素是 fieldset元素的第一个子元素。

  <fieldset>
     <legend>基本信息</legend>
     <p><label>用 户 名：</label><input type="text" name="username" /></p>
     <p><label>密　　码：</label><input type="password" name="pass1" /></p>
     <p><label>确认密码：</label><input type="password" name="pass2" /></p>
     <p><label>　E-Mail：</label><input type="email" name="email" /></p>
  </fieldset>

• 只读与禁用

  <input name="name" type="text" value="张三"  readonly>
  <input type="submit" disabled value="保存" >

标签控件<label>

将label和input相关联优点：

• 标签文本不仅与其相应的文本输入元素在视觉上相关联，程序中也是如此。 这意味着，当用户聚焦到这个表单输入元素时，屏幕阅读器可以读出标签，让使用辅助技术的用户更容易理解应输入什么数据。
• 你可以点击关联的标签来聚焦或者激活这个输入元素，就像直接点击输入元素一样。这扩大了元素的可点击区域，让包括使用触屏设备在内的用户更容易激活这个元素。

两者匹配起来时，input的id属性和label的for属性值相同

<div class="preference">
    <label for="cheese">Do you like cheese?</label>
    <input type="checkbox" name="cheese" id="cheese">
</div>

<div class="preference">
    <label for="peas">Do you like peas?</label>
    <input type="checkbox" name="peas" id="peas">
</div>

也可以直接将input放在label中，此时就不需要for和id属性，因为关联已隐含存在

<label>Do you like peas?
  <input type="checkbox" name="peas">
</label>

表单常用属性

1. placeholder

input类型的文本框提供一种提示（hint）

可以描述文本框期待用户输入何种内容

提示语默认显示，当文本框中输入内容时提示语消失

适合于input标签：text、search、url、email和password等类型

1. required

规定文本框填写内容不能为空，否则不允许用户提交表单

适合于input标签：text、search、url、email、password、number、checkbox、radio、file等类型

1. pattern

用户输入的内容必须符合正则表达式所致规则，否则 不能提交表单

<input type="text" name="tel" required pattern="正则表达式" />

HTML5组件

音频

audio

视频

video

弹幕

Marquee

文字运动的行为：

behavior：scroll(默认)、slide、alternate

文字运动的方向：

direction: up、left、right、down

文字滚动的次数：

loop: -1 表示无限滚动

height、width:设定文字滚动的范围