单元一 HTML5基础知识端基础前WebHTML5表单1表单元素2表单标记访问控制3HTML5新的input类型文本域textField 密码域Password field 单选按钮radioButton 复选框 checkBox下拉列表selcet多行文本框textArea按钮button1表单元素<form>表单元素<form>可以看作是一个包含许多表单控件的容器。action规定当提交表单时，向何处发送表单数据1表单元素<input><input> 标签规定用户可输入数据的输入字段。根据不同的 type 属性，输入字段有多种形态：文本框复选框密码框单选按钮按钮……1表单元素-文本框文本框：允许用户输入单行的文本，这个控件常用来输入姓名、地址和电子邮件等，一般语法如下：<input type= "text" name= "文本框的名字" value= "默认的文本" size= "文本框的宽度" maxlength= "允许输入的最大字符数" required=“是否必须输入” placeholder=“占位符”……>1表单元素-文本框value =“…”文本框中将默认填充该文字
HTML5是Web开发中的一种重要标准，特别是在创建交互式和动态网页方面。它极大地扩展了HTML4的功能，尤其是在表单处理方面。以下是一些关于HTML5表单的基础知识：
1. **表单元素<form>**：
表单是HTML中用于收集用户信息的基本结构，由`<form>`标签定义。`<form>`元素可以包含各种表单控件，如输入字段、按钮等。`action`属性指定了表单数据提交的目标URL，例如服务器端的处理脚本。
2. **输入元素<input>**：
`<input>`标签是最常用的表单控件，可以根据`type`属性的值创建不同类型的输入字段。常见的类型包括：
- **文本框（text）**：允许用户输入单行文本，例如`<input type="text">`。可以设置`name`属性为字段名称，`value`属性预填充文本，`size`定义宽度，`maxlength`限制最大字符数，`required`确保字段非空，`placeholder`提供提示文本。
- **密码框（password）**：与文本框类似，但字符以星号或圆点隐藏，例如`<input type="password">`。
- **复选框（checkbox）**：用户可以多选，如`<input type="checkbox" value="选项值">`，`checked`属性用于预选中。
- **单选按钮（radio）**：同一组内只能选中一个，如`<input type="radio" name="group_name" value="选项值">`，`name`属性值需相同以实现互斥。
- **按钮（button、submit、reset、image）**：`<input type="button">`用于JavaScript操作，`<input type="submit">`提交表单，`<input type="reset">`重置表单，`<input type="image">`以图像作为提交按钮。
3. **其他表单控件**：
- **下拉列表（select）**：`<select>`标签创建下拉菜单，`<option>`定义选项，如`<select name="list_name"><option value="value1">Option1</option></select>`，`multiple`属性允许多选。
- **多行文本框（textarea）**：`<textarea>`用于多行文本输入，例如`<textarea name="text_area_name"></textarea>`，可通过`rows`和`cols`属性设定高度和宽度。
4. **表单验证**：
HTML5引入了内置的客户端验证功能，比如`required`属性强制字段非空，`pattern`属性定义正则表达式验证输入格式，`min`和`max`用于数值输入范围。
5. **新特性**：
HTML5新增了一些输入类型，如邮箱（email）、电话（tel）、日期（date）、颜色（color）等，提高了用户体验并简化了数据验证。
6. **表单提交**：
用户填写完表单后，点击提交按钮（通常是`<input type="submit">`），浏览器会将所有已填字段的`name`和`value`组成键值对，通过HTTP请求发送到`<form>`的`action`属性指定的URL。
这些基础知识构成了HTML5表单的基础，它们使得开发者能够创建功能丰富的交互式网页，收集和处理用户数据。理解和掌握这些概念对于任何Web开发者来说都是至关重要的。
- 1
- 2
- 3
前往页