表单¶

表单在 Odoo 中非常强大。它们直接与其他应用程序集成，可用于许多不同的用途。

在本章中，您将了解如何：

在你的自定义主题中添加一个表单。
修改表单的动作。
通过 Bootstrap 变量来美化表单。

默认表单¶

要在您的页面中添加表单，您可以直接复制并粘贴网站构建器生成的代码到您的视图中。

它应该看起来如下所示。

<form action="/website/form/" method="post" enctype="multipart/form-data" class="o_mark_required" data-mark="*" data-pre-fill="true" data-success-mode="redirect" data-success-page="/contactus-thank-you" data-model_name="mail.mail">
     <div class="s_website_form_rows row s_col_no_bgcolor">
          <div class="form-group s_website_form_field col-12    s_website_form_dnone" data-name="Field">
               <!-- form fields -->
           </div>
     </div>
</form>

操作¶

表单标签中有一个 data-model_name。它使您能够为表单定义不同的操作。

发送邮件（此动作默认使用）。

<form data-model_name="mail.mail">

申请职位。

<form data-model_name="hr.applicant">

创建一个客户。

<form data-model_name="res.partner">

创建工单。

<form data-model_name="helpdesk.ticket">

创建一个商机。

<form data-model_name="crm.lead">

创建一个任务。

<form data-model_name="project.task">

成功¶

你可以通过 data-success-mode 定义表单提交后发生的事情。

将用户重定向到 data-success-page 中定义的页面。

<form data-success-mode="redirect" data-success-page="/contactus-thank-you">

在同一页面上显示一条消息。

<form data-success-mode="message">

你可以在表单标签下方直接添加成功消息。始终添加 d-none 类，以确保表单未提交时成功消息是隐藏的。

<div class="s_website_form_end_message d-none">
     <div class="oe_structure">
          <section class="s_text_block pt64 pb64" data-snippet="s_text_block">
               <div class="container">
                     <h2 class="text-center">This is a success!</h2>
               </div>
          </section>
     </div>
</div>

引导程序变量¶

正如您所知，网站构建器基于 Bootstrap 创建内容。表单也是如此。以下是一些 Bootstrap 变量的示例，或查看完整的变量列表。

/website_airproof/static/src/scss/bootstrap_overridden.scss¶

$input-padding-y:                       $input-btn-padding-y !default;
$input-padding-x:                       $input-btn-padding-x !default;

$input-font-family:                     $input-btn-font-family !default;
$input-font-size:                       $input-btn-font-size !default;
$input-font-weight:                     $font-weight-base !default;
$input-line-height:                     $input-btn-line-height !default;

$input-color:                           $gray-700 !default;
$input-border-color:                    $gray-400 !default;
$input-border-width:                    $input-btn-border-width !default;
$input-box-shadow:                      inset 0 1px 1px rgba($black, .075) !default;
$input-border-radius:                   $border-radius !default;

$input-focus-bg:                        $input-bg !default;
$input-focus-border-color:              lighten($component-active-bg, 25%) !default;
$input-focus-color:                     $input-color !default;
$input-focus-width:                     $input-btn-focus-width !default;
$input-focus-box-shadow:                $input-btn-focus-box-shadow !default;

Edit on GitHub