# HTML页面
### 介绍
October在`Html`外观上提供了各种有用的功能，可用于处理HTML和表单。尽管大多数示例将使用PHP语言，但所有这些功能都可以通过简单的转换直接转换为[Twig标记](https://octobercms.com/docs/markup)。
~~~
// PHP
<?= Form::open(..) ?>
// Twig
{{ form_open(...) }}
~~~
如上所示，在Twig中，所有带前缀的函数`form_`都将直接绑定到`Form`Facade，并使用*snake\_case*提供对方法的访问。有关在前端使用表单助手的[更多信息](https://octobercms.com/docs/markup/function-form)，请参见[标记指南](https://octobercms.com/docs/markup/function-form)。
### [](https://octobercms.com/docs/services/html#opening-a-form)开启表格
可以使用`Form::open`传递属性数组作为第一个参数的方法打开表单：
~~~
<?= Form::open(['url' => 'foo/bar']) ?>
//
<?= Form::close() ?>
~~~
默认情况下，`POST`将假定一个方法，但是，您可以自由指定另一个方法：
~~~
Form::open(['url' => 'foo/bar', 'method' => 'put'])
~~~
> **注意：**由于HTML表单仅支持`POST`和`GET`，`PUT`因此`DELETE`会通过自动向`_method`表单添加隐藏字段来欺骗方法。
您也可以传递常规的HTML属性：
~~~
Form::open(['url' => 'foo/bar', 'class' => 'pretty-form'])
~~~
如果您的表单要接受文件上传，`files`请在数组中添加一个选项：
~~~
Form::open(['url' => 'foo/bar', 'files' => true])
~~~
您还可以打开指向页面或组件中的处理程序方法的表单：
~~~
Form::open(['request' => 'onSave'])
~~~
#### 启用AJAX的表单
同样，可以使用以下`Form::ajax`方法打开启用AJAX的表单，其中第一个参数是处理程序方法名称：
~~~
Form::ajax('onSave')
~~~
的第二个参数`Form::ajax`应包含以下属性：
~~~
Form::ajax('onSave', ['confirm' => 'Are you sure?'])
~~~
您还可以传递局部变量以将其更新为另一个数组：
~~~
Form::ajax('onSave', ['update' => [
'control-panel' => '#controlPanel',
'layout/sidebar' => '#layoutSidebar'
]
])
~~~
> **注意**：[AJAX框架](https://octobercms.com/docs/ajax/attributes-api)中的大多数[数据属性](https://octobercms.com/docs/ajax/attributes-api)都可以通过删除`data-request-`前缀来获得。
### [](https://octobercms.com/docs/services/html#form-tokens)表单令牌
#### CSRF保护
如果[启用了保护](https://octobercms.com/docs/setup/configuration#csrf-protection)，请将该`Form::open`方法与结合使用`POST`，`PUT`或`DELETE`将CSRF令牌作为隐藏字段自动添加到表单中。另外，如果您希望为隐藏的CSRF字段生成HTML，则可以使用以下`token`方法：
~~~
<?= Form::token() ?>
~~~
#### 延迟绑定会话密钥
用于[延迟绑定的](https://octobercms.com/docs/database/relations#deferred-binding)会话密钥将作为隐藏字段添加到每种表单中。如果要手动生成此字段，可以使用以下`sessionKey`方法：
~~~
<?= Form::sessionKey() ?>
~~~
### [](https://octobercms.com/docs/services/html#form-model-binding)表单模型绑定
#### 打开模型表格
您可能要根据模型的内容填充表单。为此，请使用以下`Form::model`方法：
~~~
<?= Form::model($user, ['id' => 'userForm']) ?>
~~~
现在，当您生成表单元素（如文本输入）时，与字段名称匹配的模型值将自动设置为字段值。因此，例如，对于名为的文本输入`email`，将用户模型的`email`属性设置为值。如果会话闪存数据中有一项与输入名称匹配的项目，则该项目将优先于模型的值。优先级如下所示：
1. 会话闪存数据（旧输入）
2. 显式传递的值
3. 模型属性数据
4. 现有回发值
这使您可以快速构建不仅绑定到模型值的表单，而且如果服务器上存在验证错误，还可以轻松地重新填充表单。您可以使用以下命令手动访问这些值`Form::value`：
~~~
<input type="text" name="name" value="<?= Form::value('name') ?>" />
~~~
您可以将默认值作为第二个参数传递：
~~~
<?= Form::value('name', 'John Travolta') ?>
~~~
> **注意：**使用时`Form::model`，请务必使用来关闭表格`Form::close`！
### [](https://octobercms.com/docs/services/html#labels)标签
#### 生成标签元素
~~~
<?= Form::label('email', 'E-Mail Address') ?>
~~~
#### 指定额外的HTML属性
~~~
<?= Form::label('email', 'E-Mail Address', ['class' => 'awesome']) ?>
~~~
> **注意：**创建标签后，您创建的任何名称与标签名称匹配的表单元素也将自动收到与标签名称匹配的ID。
### [](https://octobercms.com/docs/services/html#text)文字栏位
#### 产生文字输入
~~~
<?= Form::text('username') ?>
~~~
#### 指定默认值
~~~
<?= Form::text('email', 'emailaddress@example.com') ?>
~~~
> **注：**该*隐藏*和*textarea的*方法具有相同的签名*文本*方法。
#### 生成密码输入
~~~
<?= Form::password('password') ?>
~~~
#### 产生其他输入
~~~
<?= Form::email($name, $value = null, $attributes = []) ?>
<?= Form::file($name, $attributes = []) ?>
~~~
### [](https://octobercms.com/docs/services/html#checkboxes-and-radio-buttons)复选框和单选按钮
#### 生成复选框或单选输入
~~~
<?= Form::checkbox('name', 'value') ?>
<?= Form::radio('name', 'value') ?>
~~~
#### 生成已选中的复选框或单选输入
~~~
<?= Form::checkbox('name', 'value', true) ?>
<?= Form::radio('name', 'value', true) ?>
~~~
### [](https://octobercms.com/docs/services/html#number)数
#### 产生数字输入
~~~
<?= Form::number('name', 'value') ?>
~~~
### [](https://octobercms.com/docs/services/html#file-input)档案输入
#### 生成文件输入
~~~
<?= Form::file('image') ?>
~~~
> **注意：**表单必须已打开，并且`files`选项设置为`true`。
### [](https://octobercms.com/docs/services/html#drop-down-lists)下拉式清单
#### 生成一个下拉列表
~~~
<?= Form::select('size', ['L' => 'Large', 'S' => 'Small']) ?>
~~~
#### 生成具有选定默认值的下拉列表
~~~
<?= Form::select('size', ['L' => 'Large', 'S' => 'Small'], 'S') ?>
~~~
#### 生成分组列表
~~~
<?= Form::select('animal', [
'Cats' => ['leopard' => 'Leopard'],
'Dogs' => ['spaniel' => 'Spaniel'],
]) ?>
~~~
#### 生成具有范围的下拉列表
~~~
<?= Form::selectRange('number', 10, 20) ?>
~~~
#### 生成具有范围，选定值和空白选项的下拉列表
~~~
<?= Form::selectRange('number', 10, 20, 2, ['emptyOption' => 'Choose...']) ?>
~~~
#### 生成带有月份名称的列表
~~~
<?= Form::selectMonth('month') ?>
~~~
#### 生成带有月份名称，选定值和空白选项的列表
~~~
<?= Form::selectMonth('month', 2, ['emptyOption' => 'Choose month...']) ?>
~~~
### [](https://octobercms.com/docs/services/html#buttons)纽扣
#### 生成一个提交按钮
~~~
<?= Form::submit('Click Me!') ?>
~~~
> **注意：是否**需要创建一个按钮元素？尝试*按钮*方法。它具有相同的签名*提交*。
### [](https://octobercms.com/docs/services/html#custom-macros)自定义宏
#### 注册表格宏
定义您自己的自定义Form类帮助器（称为“宏”）很容易。运作方式如下。首先，只需使用给定名称和闭包注册宏：
~~~
Form::macro('myField', function() {
return '<input type="awesome">';
})
~~~
现在，您可以使用其名称来调用宏：
#### 调用自定义表格宏
~~~
<?= Form::myField() ?>
~~~
- 基本说明
- 基本操作
- October cms 安装
- 后台控制器路径
- 图标
- 获取安装网上的插件/主题
- 插件构造器使用
- 定时任务
- October后台控制器
- vscode编辑器
- ajax操作
- 使用
- ajax更新组件
- ajax属性API
- JavaScript API
- ajax综合使用
- 主题
- 多语言主题
- 安装市场主题
- 主题程序处理
- 主题
- 页面
- 部件
- 布局
- 内容
- 组件
- 媒体
- 主题表单操作
- 表单使用
- 表单后端程序处理
- 插件
- 自定义插件
- 插件说明
- 插件导航条
- 插件数据库设置
- 插件的设置管理
- 插件的配置文件config
- 组件
- app服务
- app容器
- 扩展行为
- 缓存
- Collection类
- Lazy Collections
- Collection方法
- 助手函数
- 数组助手函数
- 路径助手函数
- 玄乐助手函数
- 其他助手函数
- 错误与记录
- 事件处理
- HTML页面
- 文件与目录操作
- 散列和加密
- 邮件
- 邮件内容
- 邮件发送
- 分页
- 模板解析器
- 动态解析器语法
- 队列消息
- 请求与输入
- 响应
- 视图
- 路由器
- 配置
- 验证操作
- 处理错误消息
- 错误消息与视图
- 可用的验证规则
- 有条件的验证规则
- 验证数组
- 错误消息
- 自定义验证规则
- 模型操作
- 定义模型与其属性
- 检索模型
- 插入与更新
- 删除模型
- 查询范围
- 事件操作
- 关联操作
- 定义关系
- 关系类型
- 多肽关系
- 关系查询
- 渴望加载
- 插入模型
- 数据库操作
- 基本用法
- 数据表结构
- 查询连贯操作
- 结果检索
- select子句
- 插入更新
- where子句
- 排序，分组，限制和偏移
- 文件附件
- Collection操作
- 属性操作
- 系列化json
- 数据库属性
- 数据库行为
- 控制器
- 后台控制器定义
- 后台页面
- 后台组件
- 后台表单
- 表单组件
- 表单视图
- 表单行为
- 后台列表
- 列表行为
- 列表过滤器
- 可用列类型
- 关系行为
- 关系行为类型
- 扩展关系行为
- 列表排序操作
- 导入导出操作
- 用于与权限
- corlate模板修改
- 修改顶部导航
- laravel问题
- 控制器不存在
- 控制器
- 路由组
- laravel笔记
- laravel 安装
- 伪静态配置
- 依赖注入 & 控制器
- 中间件
- 路由文件
- 视图