Formulir: Mengumpulkan Masukan Pengguna

Formulir: Mengumpulkan Masukan Pengguna

Apa Itu Formulir?

Membuat Formulir Dasar

<form>
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" />
  <br />
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" />
  <br />
  <button type="submit">Submit</button>
</form>

Jenis Masukan Formulir

<form>
  <label for="password">Password:</label>
  <input type="password" id="password" name="password" />
  <br />
  <label for="age">Age:</label>
  <input type="number" id="age" name="age" />
</form>

Menambahkan Tombol Radio dan Kotak Centang

<form>
  <p>Favorite Color:</p>
  <input type="radio" id="red" name="color" value="red" />
  <label for="red">Red</label>
  <br />
  <input type="radio" id="blue" name="color" value="blue" />
  <label for="blue">Blue</label>
  <br />

  <p>Hobbies:</p>
  <input type="checkbox" id="reading" name="hobby" value="reading" />
  <label for="reading">Reading</label>
  <br />
  <input type="checkbox" id="sports" name="hobby" value="sports" />
  <label for="sports">Sports</label>
</form>

Menambahkan Menu Tarik-Turun

<form>
  <label for="country">Select your country:</label>
  <select id="country" name="country">
    <option value="usa">United States</option>
    <option value="uk">United Kingdom</option>
    <option value="canada">Canada</option>
  </select>
</form>

Tombol Formulir

<form>
  <button type="submit">Submit</button>
  <button type="reset">Reset</button>
</form>

Memberi Gaya pada Formulir

<style>
  form {
    width: 300px;
    margin: 20px auto;
  }
  input, select, button {
    width: 100%;
    padding: 10px;
    margin: 5px 0;
  }
</style>

<form>
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" />
  <button type="submit">Submit</button>
</form>

Kerja Bagus!