本次目标:

一、基础知识

1.form（表单域）：在HTML中，form标签被用于定义表单域，即创建一个表单，以实现用户信息的收集和传递，form中的所有内容都会被提交给服务器。创建表单的基本语法格式如下：

<form action="URL地址" method="提交方法" name="表单名字"> 
 内容
</form>

常用属性：

action：用于指定接收并处理表单数据的服务器程序的url地址。
method:用于设置表单数据的提交方式，其取值为get或post。
name:区分同一个页面中的多个表单。

！！！每个表单都应该有自己的表单域

2.fieldset（字段集）：将表单内容的一部分打包，生成一组相关表单的字段。当一组表单元素放到 <fieldset> 标签内时，浏览器会以特殊方式来显示它们，它们可能有特殊的边界、3D 效果，或者甚至可创建一个子表单来处理这些元素。基本语法格式如下：

<form>
  <fieldset>
    <legend>学生档案</legend>
    内容
  </fieldset>
</form>

其中legend 元素为fieldset元素定义标题。

HTML <fieldset> 标签（由w3school 在线教程提供）

3.input 控件(重点)

新增的type属性值：

类型	使用示例	含义
email	<input type="email">	输入邮箱格式
tel	<input type="tel">	输入手机号码格式
url	<input type="url">	输入url格式
number	<input type="number">	输入数字格式
search	<input type="search">	搜索框（体现语义化）
range	<input type="range">	自由拖动滑块
time	<input type="time">
date	<input type="date">
datetime	<input type="datetime">
month	<input type="month">
week	<input type="week">

4.选项列表（datalist）：与 input 元素配合使用该元素，来定义 input 可能的值。

datalist 及其选项不会被显示出来，它仅仅是合法的输入值列表。

option 元素定义下拉列表中的一个选项（一个条目）。

！！！使用 input 元素的 list 属性来绑定 datalist。

基本语法格式如下：

<input list="cars" />
<datalist id="cars">
	<option value="BMW">
	<option value="Ford">
	<option value="Volvo">
</datalist>

HTML <datalist> 标签（由w3school 在线教程提供）

注意：当input 中的 id 的值与label 中的 for 的值一样，点击文本时，会自动将光标转到定位在输入框。

二、代码演示

<!DOCTYPE html>
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<form action="">
  <fieldset>
    <legend>学生档案</legend>
    <label for="userName">姓名:</label>
    <input type="text" name="userName" id="userName" placeholder="请输入用户名"> <br>
    <label for="userPhone">手机号码:</label>
    <input type="tel" name="userPhone" id="userPhone" pattern="^1\d{10}$"><br>
    <label for="email">邮箱地址:</label>
    <input type="email" required name="email" id="email"><br>
    <label for="collage">所属学院:</label>
    <input type="text" name="collage" id="collage" list="cList" placeholder="请选择"><br>
    <datalist id="cList">
      <option value="移动开发学院"></option>
      <option value="设计学院"></option>
      <option value="计算机学院"></option>
    </datalist><br>
    <label for="score">入学成绩:</label>
    <input type="number" max="100" min="0" value="0" id="score"><br>
    <label for="inTime">入学日期:</label>
    <input type="date" id="inTime" name="inTime"><br>
    <label for="leaveTime">毕业日期:</label>
    <input type="date" id="leaveTime" name="leaveTime"><br>
    <input type="submit">
  </fieldset>
</form>
</body>
</html>

原文链接：https://blog.csdn.net/wei257/article/details/94493234