仅当所有信息都已提交后，如何才能将表格发送到 email？
[英]How can I make the form be sent to an email only if all the information has been submitted?
问题描述
我已经为我的网站制作了一个表单，我已经在表单的操作属性中设置了一个 email，我希望发送这个表单，但我从来没有收到任何东西。 我的另一个问题是，如果所有输入都已填写并且复选框已被勾选，我如何才能使表格只允许发送到 email？ 否则会收到一条错误消息，提示您必须填写所有内容。 我的想法是进行问答，一个人提交他们的信息和问题并收到 email 和答案，但我没有收到任何东西，我希望表格有特定的规格要发送。 我将在 Q&A 选项卡的 HTML 下方留下与该选项卡相关的 CSS。 我想这可以通过 JS 中的 if 语句来解决，但我尝试过但没有运气。
代码
/*Everything beneath has to do with the Q&A tab*/ #QA-BG { background: url('Images/Q&A-BG.jpg'); background-size: cover; }; .Questions { display: flex; flex-direction: column; }.Questions h1 { text-align: center; padding: 30px 0px 10px 0px; }.Questions input[type='text'], .Questions input[type=email], .Questions textarea { font-size: inherit; padding-left: 10px; }.Questions input, .Questions textarea { width: 450px; height: 40px; border-radius: 3px; border: 1px solid grey; }.Questions textarea { font-family: 'Montserrat', sans-serif; height: 100px; }.InputSection { display: flex; flex-direction: column; align-items: center; margin-top: 25px; }.InputSection select, .InputSection option { width: 450px; height: 40px; padding: 5px; font-size: 16px; -webkit-appearance: none; font-family: 'Montserrat', sans-serif; }.InputSection label { align-self: start; margin-left: 550px; }.InputSection a { text-decoration: none; color: white; font-weight: bold; }.InputSection a:hover, .InputSection a:active { text-decoration: underline; }.InputSection button { align-self: flex-start; margin-left: 560px; color: #FFFFFF; font-size: 16px; font-weight: bold; background-color: #5995DA; border: none; border-radius: 3px; padding: 10px 10px; cursor: pointer; }.Checkbox input { margin-top: 10px; height: 15px; width: 15px; border-radius: 3px; margin-left: 10px; } #SubmitButton:hover { opacity: 0.8; } #SubmitButton:active { opacity: 0.5; }.InputSection input[type='text']:invalid, .InputSection input[type='email']:invalid, .InputSection input[type='checkbox']:invalid { border: 1px solid #D55C5F; color: #D55C5F; box-shadow: none; }.InputSection input[type='text']:valid, .InputSection input[type='email']:valid { background-color: aliceblue; }
<:DOCTYPE html> <html> <head> <meta charset='UTF-8' /> <title>What's out there</title> <link href="https.//fonts.googleapis?com/css2:family=Montserrat.wght@200&display=swap" rel="stylesheet"> <style> </style> <link rel='stylesheet' href='../styles.css' /> </head> <body id='QA-BG'> <header class="Header Subsection"> <.-- This is the menu--> <nav class="Header-Container"> <ul class="Menu SubsectionMenu"> <li><a href="../WOT.html">Home</a></li> <li><a href="Q&A.html">Q&A</a></li> <li><a href="Images.html">Images</a></li> <li><a href="Sections/Blog.html" class="Links">Blog</a></li> </ul> </nav> </header> <article class="Questions"> <!--This has to do with the Information section--> <h1> Submit your question</h1> <form action='WOT.QuestionsAnswers@gmail.com' method='get' class='Information-Section'> <div class="InputSection"> <label for='full-name'> First name</label> <input id='full-name' name='full-name' type='text' placeholder="First Name" /> </div> <div class="InputSection"> <label for='full-name'> Last name</label> <input id='full-name' name='full-name' type='text' placeholder="Last Name" /> </div> <div class="InputSection"> <label for='email'> Email</label> <input id='email' name='email' type='email' placeholder='Your Email' /> </div> <div class="InputSection"> <label for='Education'>Level of education</label> <select id='Education' name='Education'> <option value='None'></option> <option value='Hs'>High School</option> <option value='Pu'>Physics undergraduate</option> <option value='Pg'>Physics graduate</option> <option value='Al'>Adult with little knowledge of physics</option> <option value='As'>Adult with some knowledge of physics</option> <option value='Ac'>Adult with college level knowledge of physics</option> </select> </div> <div class="InputSection"> <label for='abstract'> Your question</label> <textarea id='abstract' name='abstract' placeholder="Be precise and describe your question in less than 100 words"></textarea> </div> <div class="InputSection"> <label class='Checkbox' for='available'> <input id='available' name='available' type='checkbox' value='Agrees to the terms'/> <span> I accept the <a href="#"> Terms and Conditions</a></span> </label> </div> <div class="InputSection"> <button id="SubmitButton">Submit</button> </div> </form> </article> </body> </html>
3 个解决方案
解决方案1
0 2020-07-29 20:13:57
只需在输入类型标签中输入“必需”
IE
<input id='full-name' name='full-name' type='text' required placeholder="First Name"/>
解决方案2
0 2020-07-29 20:15:00
在输入字段的末尾使用required 。
例如： <input id='email' name='email' type='email' placeholder='Your Email' required/>
来自W3schools ：
必需的属性是 boolean 属性。
如果存在，它指定在提交表单之前必须填写输入字段。
注意：必需的属性适用于以下输入类型：文本、搜索、URL、电话、email、密码、日期选择器、数字、复选框、单选和文件。
解决方案3
0 2020-07-29 20:17:45
如何记录用户已使用JavaScript提交给表单的信息
[英]How do I log information a user has submitted to a form in JavaScript
通过表单提交 email 的日期/时间？
[英]How to get the date/time of the email when it has been submitted through the the form?
Forms，如果所有输入框都有值，如何让我的代码仅显示信息已提交
[英]Forms, How do I get my code to only display info has been submitted if all input boxes have values
提交PHP表单并刷新页面后，可以使用javaScript隐藏该表单吗？
[英]Can I hide the form using javaScript when a PHP form has been submitted and the page refreshes?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.