★文章内容学习来源：拉勾教育大前端就业集训营

  • 目录：

一、新增输入标签

1.<input>表单类型属性值

属性名 属性值 描述
type text 单行文本输入框
password 密码输入框
radio 单选框
checkbox 复选框
button 普通按钮
reset 重置按钮
submit 提交按钮
image 图像形式的按钮
file 定义输入字段和"浏览"按钮，供文件上传
  • HTML5新增：
属性 属性值 描述
type email 限制用户输入必须为Email类型
url 限制用户输入必须为URL类型
date 限制用户输入必须为日期类型
time 限制用户输入必须为时间类型
month 限制用户输入必须为月类型
week 限制用户输入必须为周类型
number 限制用户输入必须为数字类型
range 滑动条
tel 手机号码
search 搜索框
color 生成一个颜色选择表单

1.1举例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>新增input表单类型</title>
</head>
<body>
  <form action="">
    姓名： <input type="text"><br>
    邮箱: <input type="email"><br>
    个人网站：<input type="url"><br>
    生日：<input type="date"><br>
    填表时间：<input type="time"><br>
    填表月份：<input type="month"><br>
    填表周数：<input type="week"><br>
    年龄：<input type="number" max="100" min="0" step="2" value="22"><br>
    年龄范围：<input type="range" max="100" min="0" step="2" value="22"><br>
    手机号码： <input type="tel"><br>
    搜索框： <input type="search"><br>
    喜欢颜色: <input type="color"><br>
    喜欢城市：<input type="text">
    <input type="submit" value="提交">
  </form>
</body>
</html>

2.新增<datalist> 标签

  • 简介
  • <datalist> 标签规定了<input>元素可能的选项列表。
  • <datalist>元素包含了一组<option>元素，这些元素表示预定义可选值，在<input>元素输入
    过程中，会自动响应<option>元素的值。
  • 绑定的<input>标签必须设置 list 属性，属性值等于<datalist>标签的 id 属性值。

1.2举例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>新增input表单类型datalist标签</title>
</head>
<body>
  <form action="">
    喜欢城市：<input type="text" list="list01">
    <datalist id="list01">
      <option value="广州">gz</option>
      <option value="深圳">sz</option>
      <option value="北京">bj</option>
      <option value="上海">
      </datalist>
    <input type="submit" value="提交">
  </form>
</body>
</html>

二、 新增表单属性

1.汇总

属性 值 描述
required required 表单拥有该属性表示其内容不能为空，必填
placeholder 提示文本 表单的提示信息，存在默认值将不显示
autofocus autofocus 自动聚焦属性，页面加载完成自动聚焦到指定表单，一般页面中放1个
autocomplete off / on 当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。默认已经打开，如 autocomplete=“on”，关闭 autocomplete ="off" ，需要放在表单内同时加上name属性，同时成功提交
multiple multiple 可以多选文件提交

2.1举例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>新增表单属性</title>
</head>
<body>
  <form action="">
    姓名： <input type="text" required="required" placeholder="请填入用户名" value="比如：zhangsan"><br>    
    年龄：<input type="number" max="100" min="0" step="4" value="4"><br>
    搜索框： <input type="search" autofocus="autofocus" autocomplete="off" name="sousuo"><br>
    城市：<input type="text" list="list01">
    <!-- 预定义一些选项 -->
    <datalist id="list01">
      <option value="广州">gz</option>
      <option value="深圳">sz</option>
      <option value="北京">bj</option>
      <option value="上海">
    </datalist>
    文件： <input type="file" multiple="multiple">
    <input type="submit" value="提交">
  </form>
</body>
</html>

下篇继续：
【51】静态网页开发(1)——基础