什么是表单？
表单是一个由用户在网页上进行填写和提交的区域，包含了一组可以填写的数据，用户可以通过表单与网站进行交互。表单通常包含若干个输入框、下拉菜单、单选按钮、复选框等元素组成。
<form>
<!-- 表单元素 -->
</form>
表单通过<form>标签来定义。通常表单中还包含一个提交按钮，当用户填写完表单后，点击提交按钮会将用户填写的数据提交给服务器进行处理。<form>标签中有一个属性action用来指定数据提交的地址，而method属性用来指定数据提交的方法（默认为GET请求）。
<form action='/submit' method='post'>
<!-- 表单元素 -->
<button type='submit'>提交</button>
</form>
为什么需要表单？
1. 收集数据
表单的最主要功能就是收集用户输入的数据。通过表单可以收集用户的注册信息、联系方式、评论等数据。通过这些数据，网站可以更好地了解用户、优化产品、改进服务，提升用户满意度。
2. 用户反馈
网站的重要部分就是用户反馈，而表单正是用户反馈的最佳方式之一。表单可以收集用户的评论、建议和意见，网站可以通过这些反馈改进产品和服务，提高用户满意度。
3. 接受订单
电商网站中最常用到的就是表单，用户在选择商品后，需要填写地址、付款方式等信息，网站需要收集这些信息然后进行订单处理和商品发货。
表单中常用的元素
1. 文本框
文本框是最常用的表单元素之一，可以用来收集用户输入的各种数据。
<label>用户名:</label>
<input type='text' name='username'>
上面的代码定义了一个用户名文本框，name属性用来标识文本框的名称，方便后台程序处理数据。
2. 下拉菜单
下拉菜单可以用来让用户从多个选项中选择一个选项。
<label>性别:</label>
<select name='gender'>
<option value='male'>男</option>
<option value='female'>女</option>
</select>
上面的代码定义了一个性别下拉菜单，用户可以从男、女中任选一个选项。
3. 单选按钮
单选按钮可以让用户从多个选项中选择一个选项。
<label>您平时喜欢什么运动？</label>
<input type='radio' name='sport' value='basketball'>篮球
<input type='radio' name='sport' value='football'>足球
<input type='radio' name='sport' value='swimming'>游泳
<input type='radio' name='sport' value='running'>跑步
上面的代码定义了一个运动单选按钮组，用户可以从篮球、足球、游泳、跑步四个选项中任选一个选项。
4. 复选框
复选框可以让用户从多个选项中选择一个或多个选项。
<label>您喜欢的水果是什么？</label>
<input type='checkbox' name='fruit' value='apple'>苹果
<input type='checkbox' name='fruit' value='banana'>香蕉
<input type='checkbox' name='fruit' value='orange'>橘子
<input type='checkbox' name='fruit' value='grape'>葡萄
上面的代码定义了一个水果复选框组，用户可以从苹果、香蕉、橘子、葡萄中选择一个或多个选项。
5. 文本域
文本域是一个允许用户输入大段文本的区域。
<label>留言:</label>
<textarea name='message' rows='5' cols='30'></textarea>
上面的代码定义了一个留言文本域，用户可以在其中输入多行文字。
表单验证
表单提交后需要进行验证，确保用户输入的数据符合预期。常见的表单验证有以下几种方式。
1. 必填字段验证
必填字段验证是最基本的验证方式，确保用户输入的数据不为空。
<label>用户名:</label>
<input type='text' name='username' required>
<label>密码:</label>
<input type='password' name='password' required>
上面的代码使用required属性表示该字段为必填字段。
2. 数据格式验证
根据不同的场景，输入的数据需要符合一定的格式。这种情况下，需要对数据格式进行验证，确保数据格式正确。
<label>邮箱:</label>
<input type='email' name='email' required>
<label>电话号码:</label>
<input type='tel' name='phone' pattern='[0-9]{3}-[0-9]{8}'>
上面的代码使用email类型验证邮箱格式，使用pattern属性验证电话号码格式。
3. 自定义验证
有时候需要对用户输入的数据进行更加精细化的验证，需要使用自定义验证函数。
<script>
function validateForm() {
var age = document.forms['myForm']['age'].value;
if (age < 18) {
alert('年龄必须大于18岁');
return false;
}
return true;
}
</script>
<form name='myForm' onsubmit='return validateForm()'>
<label>年龄:</label>
<input type='number' name='age'>
<button type='submit'>提交</button>
</form>
上面的代码使用自定义验证函数validateForm验证年龄必须大于18岁。
总结
表单作为用户与网站交互的重要手段，是一种重要的信息收集和数据交互方式。在创建表单时，需要根据不同类型的数据选择合适的表单元素。同时，在表单提交后的验证过程中，可以根据场景选择不同的验证方式，确保后台处理的数据格式正确。