问题[forms](coding)

我正在创建一个注册表单，但无法定位眼睛图标。最初，图标的位置正确，但当显示错误消息时，图标就会错位。

以下是一些显示该问题的屏幕截图以及我正在使用的代码。

另外，我不知道如何让错误消息图标变大。对于较长的错误消息，图标会变得太小。

这是我的代码：

                    <div className="mt-6">
                        <label htmlFor="password" className="block text-sm font-normal text-gray-700">
                            Contraseña
                        </label>
                        <div className="mt-1 relative">
                            <input
                                id="password"
                                name="password"
                                type={showPassword ? 'text' : 'password'}
                                autoComplete="current-password"
                                placeholder="Contraseña"
                                required
                                value={password}
                                onChange={(e) => setPassword(e.target.value)}
                                onBlur={() => handleBlur('password')}
                                className="block w-full appearance-none placeholder:text-xs rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-neutral-950 focus:outline-none sm:text-sm"
                            />
                            <span
                                onClick={togglePasswordVisibility}
                                className="absolute inset-y-0 right-0 pr-3 flex items-center cursor-pointer justify-center"
                            >
                                {showPassword ? <VscEyeClosed /> : <VscEye />}
                            </span>

                            {passwordError && (
                                <p className="mt-2 text-xs text-red-600 flex items-center">
                                    <TiWarning className="mr-1" /> {passwordError}
                                </p>
                            )}

                        </div>
                    </div>

我正在使用 Tailwind CSS，说实话，我对前端开发没有太多经验。对于后端开发人员来说，这就像一场噩梦！有人能帮我解决这些问题吗？

我正在阅读flask mega 教程第 5 章，发现其中有一部分我不明白：form变量似乎在对路由函数的调用之间保持在范围内，请参见下面的代码（第 5 章中的完整示例中的缩写）。

@app.route("/register", methods=["GET", "POST"])
def register():

    form = RegistrationForm()

    if form.validate_on_submit():
        #Add user to data base
        return redirect(url_for("login"))
    return render_template("register.html", title="Register", form=form)

我的理解如下：

首次导航到时，/register它会被调用"GET"。 会form被实例化，并且form.validate_on_submit()会false返回表单，然后用户会填写表单。

当用户提交表单时，/register路由被调用。在我看来，上次调用"POST"的函数范围应该丢失，一个新的实例应该再次被实例化，我们会陷入循环。register()formform.validate_on_submitfalse

调试表明它不是这样工作的，我最好的理解是它form以某种方式持续存在，但我不明白为什么/它通过什么机制持续存在。有人能告诉我吗？

使用 Rocket 库，我想发布一个带有 html 表单的结构。

#[derive(Debug, FromForm, Serialize)]
pub struct MyStructForm {
    pub item1: String,
    pub item2: u32,
}

我设法通过以下代码获取表单：

#[post("/an/url", data="<input>")]
pub fn post_an_url(input: Form<MyStructForm>)
    -> Result<Json<u32>, String> {

input值不是MyStructForm但是Form<MyStructForm>。

有没有办法“解封装”并获取 MyStructForm 数据？

    let my_struct = a_function_to_decapsulate_form(input);

我正在尝试创建一个可滚动的模式对话框，其中包含modal-body中的表单。它是一个长表单，垂直，所以我想利用模态页脚部分来容纳提交按钮，因为它在滚动表单/正文时保持静止。

我正在使用像这样的直接模态结构：

<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable">
    <div class="modal-content">

      <div class="modal-body">
        ... FORM CONTENT ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="submit" class="btn btn-primary">Understood</button>
      </div>

    </div>
  </div>
</div>

当我尝试插入<form>和</form>标签时，问题就出现了。如果我放在modal-body<form>之前并放在modal-footer之后，它会破坏页脚的静态性质以及正文的可滚动性质。</form>

<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable">
    <div class="modal-content">

      <form action=".....">
        <div class="modal-body">
          ... FORM CONTENT ...
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
          <button type="submit" class="btn btn-primary">Understood</button>
        </div>
      </form>

    </div>
  </div>
</div>

我知道我可以将表单本身包含在模态主体中，并在表单外部使用标准按钮，以便通过 JavaScript 提交表单，但我更愿意将按钮保留在表单内部，以便按下时表单会enter提交。

.modal我还尝试过在div 周围、.modal-dialogdiv 周围和 div 周围移动表单标签.modal-content，每次它都会以不同的方式破坏模式。

我在这里重建了这个问题：https ://codepen.io/JayblesG/pen/MWRjvOx

有没有人成功地完成过这样的事情？

我有一个具有多个属性的核心数据模型和一个用于编辑所有这些属性的表单。
我希望“自动保存”更改。因此，一旦我更改表单中的某些内容，它就会保存到我的核心数据上下文中。

我发现自己做了很多自定义绑定来保存更改时的上下文，例如：

TextField("My string", 
  text: Binding(
    get: {
        model.myString
    }, 
    set: { newValue in
        model.myString = newValue
        try? context.save()
    }
  )
)

我想简化我的代码，并将特殊的绑定绑定到核心数据上下文以避免出现此样板。我怎样才能简化这个？

使用最新的 Symfony，我有一个自定义表单，其中根据原则请求在实体上创建一个字段。要构造此请求，需要id控制器传递一个参数，并带有选项“postedBy”

class StudyDecomposedType extends AbstractType
{
    public function buildForm(FormBuilderInterface $builder, array $options): void
    {
        $builder
            
            ->add('subjects', EntityType::class,[
                'class' => Subject::class,
                'choice_label' => 'identifier',
                'required' => false,
                'multiple' => true,
                'query_builder' => function (EntityRepository $er) use ($options): QueryBuilder {
                    return $er->createQueryBuilder('a')
                        ->leftJoin("a.studies", "s")
                        ->leftJoin(Studyaccess::class, 'sa', 'WITH', 's=sa.study')
                        ->where('(sa.user = :userid AND (sa.r = 1 OR sa.w = 1)) OR (a.owner= :userid)')
                        ->setParameter('userid', $options['postedBy']);
                        
                        
                },
                ])
            ;
    }

    public function configureOptions(OptionsResolver $resolver): void
    {
        $resolver->setDefaults([
            
                'postedBy' => 0,
            

        ]);

        $resolver->setAllowedTypes('postedBy', 'int');
        
    }

在我的控制器中，我制作如下形式：

$form = $this->createForm(StudyDecomposedType::class, 
                   $options= ['postedBy' => $this->getUser()->getId(),] 
        );

但无论我在选项中输入什么值，请求中的值都是我在默认值中输入的值（此处为 0）。

有人可以帮助我吗，我完全迷失了

该参数userid应该是通过调用$optionscrontroller 给出的参数，但该值永远不会改变。我验证了控制器中的 id，我查看了生成的 sql，并且userid始终为其默认值