How to create: Contact Form

Paanong gumawa ng contact form

Unang hakbang - Magdagdag ng HTML:

Gamit ang <form> element para sa pagtanggap ng input. Makakatutok ka sa mga magkakaroon ng kaugnayan sa aming tutorial sa PHP para sa mas maraming impormasyon.

Pansamantala, magdagdag ng kontrol ng input para sa bawat pinagdaraan (at may katugmang label):

<div class="container">
  <form action="action_page.php">
    <label for="fname">First Name</label>
    <input type="text" id="fname" name="firstname" placeholder="Your name..">
    <label for="lname">Last Name</label>
    <input type="text" id="lname" name="lastname" placeholder="Your last name..">
    <label for="country">Country</label>
    <select id="country" name="country">
      <option value="australia">Australia</option>
      <option value="canada">Canada</option>
      <option value="usa">USA</option>
    </select>
    <label for="subject">Subject</label>
    <textarea id="subject" name="subject" placeholder="Write something.." style="height:200px"></textarea>
    <input type="submit" value="Submit">
  </form>
</div>

Ikalawa - Magdagdag ng CSS:

/* Itatalaga ang estilo para sa input na may uri "text", elementong pili at text area */
input[type=text], select, textarea {
  width: 100%; /* Full width */
  padding: 12px; /* Ilang padding */ 
  border: 1px solid #ccc; /* Grey border */
  border-radius: 4px; /* Bulging border */
  box-sizing: border-box; /* Tiyakin na ang padding at laki ng width ay hindi magbabago */
  margin-top: 6px; /* Bawat bawat itaas na margen */
  margin-bottom: 16px; /* Bawat bawat baba na margen */
  resize: vertical /* Pinahihintulutan ang gumalaw ng laki ng text area sa vertical na paraan lamang, hindi sa horizontal */
}
/* Itatalaga ang mga espesyal na estilo ng background color at iba pa para sa sumite */
input[type=submit] {
  background-color: #04AA6D;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
/* Magdagdag ng mas malalim na kulay ng background kapag nasa ilalim ng mouse ang sumite */
input[type=submit]:hover {
  background-color: #45a049;
}
/* Magdagdag ng kulay ng background at ilang padding sa konteyner ng form */
.container {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
}

亲自试一试

相关页面

教程：HTML 表单

教程：CSS 表单