Hoe te maken: e-mailnieuwsbrief

Leer hoe je een e-mailnieuwsbrief kunt maken met CSS.

Abonneren op onze nieuwsbrief

Lorem ipsum tekst over waarom je je moet abonneren op onze nieuwsbrief blabla. Lorem ipsum tekst over waarom je je moet abonneren op onze nieuwsbrief blabla. Lorem ipsum tekst over waarom je je moet abonneren op onze nieuwsbrief blabla.

Try it yourself

Hoe nieuwsbrieven te maken

Eerste stap - Voeg HTML toe:

Gebruik het <form>-element om invoer te verwerken. Lees meer over dit onderwerp in onze PHP-tutorial.

Vervolgens voeg je invoercontroleelementen en een 'Indienen'-knop toe voor elk veld:

<form action="action_page.php">
  <div class="container">
    <h2>Abonneer je op onze Nieuwsbrief</h2>
    <p>Lorem ipsum..</p>
  </div>
  <div class="container" style="background-color:white">
    <input type="text" placeholder="Naam" name="name" required>
    <input type="text" placeholder="E-mailadres" name="mail" required>
    <label>
      <input type="checkbox" checked="checked" name="subscribe"> Dagelijkse Nieuwsbrief
    </label>
  </div>
  <div class="container">
    <input type="submit" value="Subscribe">
  </div>
</form>

第二步 - 添加 CSS：

/* 为表单元素设置样式，使其周围带有边框 */
form {
  边框: 4px 实线 #f1f1f1;
}
/* 为容器添加一些内边距和灰色背景色 */
.container {
  填充: 20px;
  背景颜色: #f1f1f1;
}
/* 设置输入元素和提交按钮的样式 */
input[type=text], input[type=submit] {
  宽度: 100%;
  填充: 12px;
  边距: 8px 0;
  显示: 行内块;
  边框: 1px 实线 #ccc;
  box-sizing: border-box;
}
/* 为复选框添加外边距 */
input[type=checkbox] {
  上边距: 16px;
}
/* 设置提交按钮的样式 */
input[type=submit] {
  背景颜色: #04AA6D;
  颜色: 白色;
  边框: 无;
}
input[type=submit]:hover {
  透明度: 0.8;
}

Try it yourself

Related pages

Tutorial:HTML form

Tutorial:CSS form