<!-- By Lorenzo Satta Chiris  -->

<h1 class="header">Form in HTML</h1>

<form action="/page/" class="form">
  <section class="container">
    <h3 class="titleH3">Text input</h3>
    <input type="text" placeholder="This is a text input">
    <h3 class="titleH3">Password input</h3>
    <input type="password" placeholder="This is a password input">
    <h3 class="titleH3">Email input</h3>
    <input type="email" placeholder="yourOriginalEmail@gmail.com">
    <h3 class="titleH3">Date input</h3>
    <input type="date">
    <h3 class="titleH3">Url input</h3>
    <input type="url" placeholder="https://codepen.io/DevLorenzo">
    <h3 class="titleH3">Image input</h3>
    <input type="image">
    <h3 class="titleH3">Search input</h3>
    <input type="search" placeholder="Search">
    <h3 class="titleH3">Phone number input</h3>
    <input type="tel" placeholder="Phone Number">
  </section>

  <section class="container">
    <h3 class="titleH3">CheckBox input</h3>
    <input type="checkbox" name="Check">
    <h3 class="titleH3">Button input</h3>
    <input type="button">
    <h3 class="titleH3">Number input</h3>
    <input type="number" placeholder="Enter Number">
    <h3 class="titleH3">Color input</h3>
    <input type="color">
    <h3 class="titleH3">Radio input</h3>
    <input type="radio" name="radio" id="radio1" value="radio1selected">
    <input type="radio" name="radio" id="radio2" value="radio1selected">
    <input type="radio" name="radio" id="radio3" value="radio1selected">
    <h3 class="titleH3">Multiple option input</h3>
    <select name="Select" id="Select">
      <option value="Default">Default field</option>
      <option value="1">Field 1</option>
      <option value="2">Fiel 2</option>
      <option value="3">Field 3</option>
      <option value="4">Fiel 4</option>
    </select>
    <h3 class="titleH3">Label associate with username</h3>
    <label for="username">Try clicking on Enter a username</label>
    <input type="text" placeholder="Enter username" id="username">
    <h3 class="titleH3">Text input + Hover</h3>
    <input type="text" id="inputHover" placeholder="Hover Met">
    <h3 class="titleH3">Text input + Focus</h3>
    <input type="text" id="inputFocus" placeholder="Focus on me">
    <h3 class="titleH3">Text input + Disabled</h3>
    <input type="text" placeholder="This is a text input Disabled" disabled>
    <h3 class="titleH3">Multiple option input + Disabled options</h3>
    <select name="Select" id="Select">
      <option value="Default">Default field</option>
      <option value="1">Field 1</option>
      <option value="2" disabled>Fiel 2</option>
      <option value="3">Field 3</option>
      <option value="4" disabled>Fiel 4</option>
    </select>
</form>
</section>

/* By Lorenzo Satta Chiris */

@import url("https://fonts.googleapis.com/css2?family=Asap+Condensed:wght@400;600&display=swap");

.header {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #1d1e22;
  margin-top: -10px;
  padding: 23px 0;
  color: whitesmoke;
  font-family: "Asap", sans-serif;
}

.form {
  display: flex-start;
  justify-content: center;
  align-content: center;
  flex-direction: row;
}

.titleH3 {
  font-family: "Asap Condensed", sans-serif;
  font-size: 25px;
}

.container {
  display: flex;
  justify-content: center;
  flex-direction: column;
}

input {
  font-family: "Asap Condensed", sans-serif;
  font-size: 20px;
}

#inputHover:hover {
  background-color: whitesmoke;
  margin-bottom: 1%;
  border-width: 3px;
}

#inputFocus:focus {
  background-color: yellow;
  color: black;
}

select {
  font-size: 22px;
}

/* By Lorenzo Satta Chiris */

// No Javascript this time!