如何实现输入表单可点击功能？附相关代码求助

问题根因 #

你遇到的输入表单无法点击的问题有两个核心原因：

• 现有代码里没有真正的可输入表单元素，标注了input类的元素本质是<div>标签，本身不支持输入交互
• 整个<form>标签绑定了全局点击事件，点击表单任意区域都会直接触发提交逻辑，就算加了输入框也无法正常点击输入

修复步骤 #

1. 替换假输入框为原生输入元素
   将原代码中

<div class="rectangle-4x input"></div>
<div class="text-2">Enter your email address</div>

替换为

<input type="email" class="rectangle-4x input" name="user_email" placeholder="Enter your email address">

如果要保留原有的提示文本样式，也可以只替换<div class="rectangle-4x input"></div>为input标签，保留text-2的div即可。

2. 移除form标签的全局点击事件
   删除form标签上的onclick="window.open('javascript:SubmitForm(%27form2%27)', '_self');"属性，避免点击表单任意位置直接提交。

3. 给提交按钮绑定提交逻辑
   将原代码中单纯的div样式的提交按钮

<div class="get-started valign-text-middle">Get Started</div>

修改为表单提交按钮，绑定提交逻辑：

<button type="submit" class="get-started valign-text-middle" onclick="SubmitForm('form2')">Get Started</button>

如果要保留原有按钮样式，可给button标签添加额外的css清除默认按钮样式即可。

修复后完整代码 #

<div class="container-center-horizontal">
  <form class="android-frontpage screen" name="form2" action="form2" method="post">
    <div class="overlap-group">
      <a href="javascript:SubmitForm('form2')" onclick="window.event.stopPropagation()"><img class="android-frontpage-1" src="https://anima-uploads.s3.amazonaws.com/projects/6162fec6f667ec5b97a58c2b/releases/6163081a3beef0eaf8ca4199/img/android---frontpage@2x.jpg" /> </a><img class="kid-pic-1" src="https://anima-uploads.s3.amazonaws.com/projects/6162fec6f667ec5b97a58c2b/releases/6163081a3beef0eaf8ca4199/img/kid-pic-1@2x.png" />
      <div class="rectangle-9"></div>
      <img class="rectangle-8" src="https://anima-uploads.s3.amazonaws.com/projects/6162fec6f667ec5b97a58c2b/releases/6163081a3beef0eaf8ca4199/img/rectangle-8@4x.png" />
      <p class="text-1">Join our community to get early access.</p>
      <input type="email" class="rectangle-4x input" name="user_email" placeholder="Enter your email address">
      <div class="rectangle-4"></div>
      <button type="submit" class="get-started valign-text-middle" onclick="SubmitForm('form2')">Get Started</button>
      <img class="evolvere-academy" src="https://anima-uploads.s3.amazonaws.com/projects/6162fec6f667ec5b97a58c2b/releases/6163081a3beef0eaf8ca4199/img/evolvere-academy@1x.png" />
      <div class="courses montserrat-bold-white-14px">Courses</div>
      <div class="blogs montserrat-bold-white-14px">Blogs</div>
      <div class="our-story montserrat-bold-white-14px">Our Story</div>
      <div class="contact-us montserrat-bold-white-14px">Contact Us</div>
      <h1 class="text-3">Building Education Of The Future!</h1>
    </div>
  </form>
</div>

内容的提问来源于stack exchange，提问作者thesksamim