如何使聯系人表單中需要輸入屬性？

Question

我想在聯系表格中進行所有輸入，我嘗試使用與w3schools使用的邏輯相同的邏輯，即<input type="text" id="username" name="username" required>

但是，在我的情況下是不同的，因為我沒有在我的聯系表的 HTML 中使用的相同語法。

這是聯系表格的代碼：

 input[type=text], [type=email], select, textarea { width: 100%; padding: 12px; border: 1px solid #ccc; margin-top: 6px; margin-bottom: 16px; resize: vertical; } input[type=submit] { background-color: rgb(62, 3, 179); color: white; padding: 12px 20px; border: none; cursor: pointer; } input[type=submit]:hover { background-color: deeppink; }.contactform { position: relative; border-radius: 50px; background-color: #f2f2f2; padding: 5px; z-index:2; display: block; margin-left: auto; margin-right: auto; margin-bottom:auto; margin-top:1%; width: 100%; animation-name: gradient; animation-duration: 3s; animation-iteration-count: infinite; }.contactform:hover { animation-name: gradient; animation-duration: 15s; animation-iteration-count: infinite; }.column { float: center; width: 50%; margin-top: 6px; padding: 20px; display: block; margin-left: auto; margin-right: auto; width: 40%; }.row:after { content: ""; display: table; clear: both; } @media screen and (max-width: 600px) {.column, input[type=submit] { width: auto; margin-top:0; } }

 <section id="contact"> <div class="container" data-aos="fade-up"> <div class="contactform"> <div style="text-align:center"> <div class="section-title"> <h2><br/>Get In Touch</h2> </div> <p>Feel Free To Reach Out To Me Through This Form. </p> </div> <div class="row"> <div class="column"> <form name="myform" action="thankyou.html" method="POST" onsubmit="return validForm()"> <label for="firstname">First Name</label> <input type="text" id="firstname" name="firstname" placeholder="Your name.."> <label for="lastname">Last Name</label> <input type="text" id="lastname" name="lastname" placeholder="Your last name.:"> <label for="email">Email.</label> <input type="email" id="email" name="email" placeholder="Your Email.."> <label for="subject">Subject</label> <textarea id="subject" name="subject" placeholder="Lets Collaborate..:" style="height: 170px"></textarea> <input type="submit" value="Submit"> </form> </div> </div> </div> </div> </section>

我如何將所有字段設為“必填”？ 例如，如果用戶沒有填寫必填字段並且他們點擊了提交按鈕，則應該有一條消息指出該字段是必填的。 有什么建議么？

Answer 1

將required屬性添加到form中的每個單獨的input 。 更新示例：

 input[type=text], [type=email], select, textarea { width: 100%; padding: 12px; border: 1px solid #ccc; margin-top: 6px; margin-bottom: 16px; resize: vertical; } input[type=submit] { background-color: rgb(62, 3, 179); color: white; padding: 12px 20px; border: none; cursor: pointer; } input[type=submit]:hover { background-color: deeppink; }.contactform { position: relative; border-radius: 50px; background-color: #f2f2f2; padding: 5px; z-index:2; display: block; margin-left: auto; margin-right: auto; margin-bottom:auto; margin-top:1%; width: 100%; animation-name: gradient; animation-duration: 3s; animation-iteration-count: infinite; }.contactform:hover { animation-name: gradient; animation-duration: 15s; animation-iteration-count: infinite; }.column { float: center; width: 50%; margin-top: 6px; padding: 20px; display: block; margin-left: auto; margin-right: auto; width: 40%; }.row:after { content: ""; display: table; clear: both; } @media screen and (max-width: 600px) {.column, input[type=submit] { width: auto; margin-top:0; } }

 <section id="contact"> <div class="container" data-aos="fade-up"> <div class="contactform"> <div style="text-align:center"> <div class="section-title"> <h2><br/>Get In Touch</h2> </div> <p>Feel Free To Reach Out To Me Through This Form. </p> </div> <div class="row"> <div class="column"> <form name="myform" action="thankyou.html" method="POST"> <label for="firstname">First Name</label> <input type="text" id="firstname" name="firstname" placeholder="Your name.." required> <label for="lastname">Last Name</label> <input type="text" id="lastname" name="lastname" placeholder="Your last name.:" required> <label for="email">Email.</label> <input type="email" id="email" name="email" placeholder="Your Email.." required> <label for="subject">Subject</label> <textarea id="subject" name="subject" placeholder="Lets Collaborate..:" style="height:170px" required></textarea> <input type="submit" value="Submit"> </form> </div> </div> </div> </div> </section>

Answer 2

 input[type=text], [type=email], select, textarea { width: 100%; padding: 12px; border: 1px solid #ccc; margin-top: 6px; margin-bottom: 16px; resize: vertical; } input[type=submit] { background-color: rgb(62, 3, 179); color: white; padding: 12px 20px; border: none; cursor: pointer; } input[type=submit]:hover { background-color: deeppink; }.contactform { position: relative; border-radius: 50px; background-color: #f2f2f2; padding: 5px; z-index: 2; display: block; margin-left: auto; margin-right: auto; margin-bottom: auto; margin-top: 1%; width: 100%; animation-name: gradient; animation-duration: 3s; animation-iteration-count: infinite; }.contactform:hover { animation-name: gradient; animation-duration: 15s; animation-iteration-count: infinite; }.column { float: center; width: 50%; margin-top: 6px; padding: 20px; display: block; margin-left: auto; margin-right: auto; width: 40%; }.row:after { content: ""; display: table; clear: both; } @media screen and (max-width: 600px) {.column, input[type=submit] { width: auto; margin-top: 0; } }

 <section id="contact"> <div class="container" data-aos="fade-up"> <div class="contactform"> <div style="text-align:center"> <div class="section-title"> <h2><br/>Get In Touch</h2> </div> <p>Feel Free To Reach Out To Me Through This Form. </p> </div> <div class="row"> <div class="column"> <form name="myform" action="thankyou.html" method="POST"> <label for="firstname">First Name</label> <input type="text" id="firstname" name="firstname" placeholder="Your name.." required> <label for="lastname">Last Name</label> <input type="text" id="lastname" name="lastname" placeholder="Your last name.:" required> <label for="email">Email.</label> <input type="email" id="email" name="email" placeholder="Your Email.." required <label for="subject">Subject</label> <textarea id="subject" name="subject" placeholder="Lets Collaborate..:" style="height:170px" required></textarea> <input type="submit" value="Submit"> </form> </div> </div> </div> </div> </section>

我不知道你的意思

我想在聯系表單中輸入所需的每一個輸入，我嘗試使用與 w3schools 使用的相同的邏輯，即

但是，在我的情況下是不同的，因為我沒有在我的聯系表的 HTML 中使用的相同語法。

但required的作品！

此外，您的form action不能是.html文件！