ademilter/form.html

## form.html
<html>
  <head>
    <title>Form ve Elemanları</title>

    <link rel="stylesheet" href="main.css" />
  </head>

  <body>
    <!--
      - adı *
      - telefon *
      - email *
      - mesaj
      - yaşadığı şehir
      - cinsiyet

        reset ve submit POST:https://httpbin.org/post
     -->

    <form action="https://httpbin.org/post" method="POST">
      <input type="hidden" value="s-500" name="product" />

      <div class="form-row">
        <label for="adi">Adı</label>
        <input
          name="adi"
          id="adi"
          type="text"
          required
          placeholder="Ahmet Yılmaz"
        />
      </div>

      <div class="form-row">
        <label for="tel">Telefon</label>
        <input name="tel" id="tel" type="tel" required />
      </div>

      <div class="form-row">
        <label for="email">Email</label>
        <input name="email" id="email" type="email" required />
      </div>

      <div class="form-row">
        <label for="mesaj">Mesaj</label>
        <textarea name="mesaj" id="mesaj" rows="3"></textarea>
      </div>

      <div class="form-row">
        <label for="sehir">Şehir</label>
        <select name="sehir" id="sehir">
          <option value="34">İstanbul</option>
          <option value="35" selected>İzmir</option>
        </select>
      </div>

      <div class="form-row">
        <p>Sevdiğiniz Renk</p>

        <div class="radio-container">
          <label
            ><input type="radio" name="renk" value="kirmizi" checked />
            Kırmızı</label
          >
          <label><input type="radio" name="renk" value="yesil" /> Yeşil</label>
        </div>
      </div>

      <div class="form-row">
        <button type="reset">Sıfırla</button>
        <button type="submit">Gönder</button>
      </div>
    </form>
  </body>
</html>

## main.css
body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
}

form {
  padding: 40px;
  width: 260px;
  margin-left: auto;
  margin-right: auto;
}

.form-row {
  margin-bottom: 20px;
}

.form-row > label {
  display: block;
  margin-bottom: 6px;
}

input[type="text"],
input[type="tel"],
input[type="email"],
select,
button,
textarea {
  width: 100%;
  border-radius: 5px;
  height: 42px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  padding-left: 15px;
  padding-right: 15px;
  font-size: inherit;
  font-family: inherit;
  background-color: white;
}

input[type="text"]::placeholder,
input[type="tel"]::placeholder,
input[type="email"]::placeholder,
textarea::placeholder {
  color: rgb(175, 175, 175);
}

input[type="text"]:focus,
input[type="tel"]:focus,
input[type="email"]:focus,
textarea:focus {
  border-color: rgb(68, 176, 255);
}

textarea {
  height: 60px;
  padding-top: 10px;
  padding-bottom: 10px;
  min-height: 42px;
  max-height: 200px;
  resize: vertical;
}

select {
  -webkit-appearance: none;
  background-image: url("arrow-down.svg");
  background-repeat: no-repeat;
  background-position: right 10px center;
}

.radio-container label {
  display: inline-block;
}

.radio-container label + label {
  margin-left: 20px;
}

button {
  display: inline-block;
  width: auto;
  border: 0;
  background-color: #eee;
}

button[type="submit"] {
  margin-left: 10px;
  color: white;
  background-color: rgb(68, 176, 255);
}
	<html>
	<head>
	<title>Form ve Elemanları</title>

	<link rel="stylesheet" href="main.css" />
	</head>

	<body>
	<!--
	- adı *
	- telefon *
	- email *
	- mesaj
	- yaşadığı şehir
	- cinsiyet

	reset ve submit POST:https://httpbin.org/post
	-->

	<form action="https://httpbin.org/post" method="POST">
	<input type="hidden" value="s-500" name="product" />

	<div class="form-row">
	<label for="adi">Adı</label>
	<input
	name="adi"
	id="adi"
	type="text"
	required
	placeholder="Ahmet Yılmaz"
	/>
	</div>

	<div class="form-row">
	<label for="tel">Telefon</label>
	<input name="tel" id="tel" type="tel" required />
	</div>

	<div class="form-row">
	<label for="email">Email</label>
	<input name="email" id="email" type="email" required />
	</div>

	<div class="form-row">
	<label for="mesaj">Mesaj</label>
	<textarea name="mesaj" id="mesaj" rows="3"></textarea>
	</div>

	<div class="form-row">
	<label for="sehir">Şehir</label>
	<select name="sehir" id="sehir">
	<option value="34">İstanbul</option>
	<option value="35" selected>İzmir</option>
	</select>
	</div>

	<div class="form-row">
	<p>Sevdiğiniz Renk</p>

	<div class="radio-container">
	<label
	><input type="radio" name="renk" value="kirmizi" checked />
	Kırmızı</label
	>
	<label><input type="radio" name="renk" value="yesil" /> Yeşil</label>
	</div>
	</div>

	<div class="form-row">
	<button type="reset">Sıfırla</button>
	<button type="submit">Gönder</button>
	</div>
	</form>
	</body>
	</html>
	body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	}

	form {
	padding: 40px;
	width: 260px;
	margin-left: auto;
	margin-right: auto;
	}

	.form-row {
	margin-bottom: 20px;
	}

	.form-row > label {
	display: block;
	margin-bottom: 6px;
	}

	input[type="text"],
	input[type="tel"],
	input[type="email"],
	select,
	button,
	textarea {
	width: 100%;
	border-radius: 5px;
	height: 42px;
	border: 1px solid rgba(0, 0, 0, 0.2);
	padding-left: 15px;
	padding-right: 15px;
	font-size: inherit;
	font-family: inherit;
	background-color: white;
	}

	input[type="text"]::placeholder,
	input[type="tel"]::placeholder,
	input[type="email"]::placeholder,
	textarea::placeholder {
	color: rgb(175, 175, 175);
	}

	input[type="text"]:focus,
	input[type="tel"]:focus,
	input[type="email"]:focus,
	textarea:focus {
	border-color: rgb(68, 176, 255);
	}

	textarea {
	height: 60px;
	padding-top: 10px;
	padding-bottom: 10px;
	min-height: 42px;
	max-height: 200px;
	resize: vertical;
	}

	select {
	-webkit-appearance: none;
	background-image: url("arrow-down.svg");
	background-repeat: no-repeat;
	background-position: right 10px center;
	}

	.radio-container label {
	display: inline-block;
	}

	.radio-container label + label {
	margin-left: 20px;
	}

	button {
	display: inline-block;
	width: auto;
	border: 0;
	background-color: #eee;
	}

	button[type="submit"] {
	margin-left: 10px;
	color: white;
	background-color: rgb(68, 176, 255);
	}