Создать форму

@EK · Регистрация: 16.02.2012

Author24 — интернет-сервис помощи студентам

Все привет!
Пытаюсь сделать форму.

HTML5

<div id="form"> 
   <form action="reg.js method="post">
      <input placeholder="Введите свое имя" type="text"><br>
      <input placeholder="Введите свой email" type="email"><br>
      <input placeholder="Введите свое почтовый индекс" type="text"><br>
      Ваш пол:<br>
      <input type="radio" name="choice" value="man">Мужской
     <input type="radio" name="choice" value="woman">Женский  
   </form>
</div>
 
</div>

CSS

1
2
3

#form {width:200px; height:130px; background:#00CED1; width:400px; height:250px; border-radius:23px}
 
input {background:#FAEBD7; width:213px; margin-top:11px; margin-left:2px; font-size:13px; border-radius:11px;}

Скажите:
1) Допустимо ли делать див с таким названием или надо быть просто использовать тег <form> ?
2) Почему два последних инпута расположились горизонтально и текст так далеко от переключателя?

@N-Star · 28.03.2017, 17:39

Сообщение от EK

1)

допустимо

Сообщение от EK

2)

потаму что чекбокс это тег инпут которому задана ширина в вашем css, а сам чекбокс посередине этой ширины - кажется что отступ

если добавить, все уйдет

CSS

1
2
3

input[type=radio] {
  width: auto; // отменяет вышеуказанную ширину 
}

@EK · 28.03.2017, 17:49 **[ТС]**

А можно ли сделать так, чтобы ширина первых инпутов осталась такой же, а ширину чекбоксов поменять?

@N-Star · 28.03.2017, 17:59

Цсс в моем посте и есть этот способ, просто добавить его надо в конец вашего Цсс

@EK · 29.03.2017, 12:05 **[ТС]**

Капельку переделал, доделал и...
Подскажите, пожалуйста, что можно переделать в сторону улучшения?
Например чекбоксу я поставил отрицательные маргины. Допустимо ли это или лучше так не делать?

CSS

*{margin:0; padding:0;}
 
#form {margin:15px 0 0 23px; background:#00CED1; width:250px; height:288px; border-radius:23px;}
 
input {background:#FAEBD7; width:213px; margin:14px 0 0 12px; font-size:13px; border-radius:12px;}
 
.gender {width:80px; margin:16px 0 0 35px;}
 
input[type=radio] {width:auto; margin:5px 0 0 12px;}
 
input[type=checkbox] {vertical-align:top; margin-left:-100px; margin-top:-40px; background:red; width:235px;}
 
.agree {width:180px; margin:20px 0 0 34px;}
 
input[type=button]{width:80px; float:right; margin:30px 15px 0 0; background:#BC8F8F;}

HTML5

<div id="form">
   <input placeholder="Введите свое имя" type="text"><br>
   <input placeholder="Введите свой email" type="email"><br>
   <input placeholder="Введите свое почтовый индекс" type="text"><br>
      <div class="gender">Ваш пол:</div>
   <input name="choice" value="man" type="radio">Мужской
   <input name="choice" value="woman" type="radio">Женский  
   <div class="agree">Я согласен с правилами использования ресурса</div>
      <input type="checkbox">
   <input value="Готово" onclick="alert('Форма заполнена верно');" type="button"> 
</div>

@EK 8 / 8 / 0 Регистрация: 16.02.2012 Сообщений: 381
	28.03.2017, 17:49 [ТС]	3
	А можно ли сделать так, чтобы ширина первых инпутов осталась такой же, а ширину чекбоксов поменять? 0

@N-Star 60 / 60 / 29 Регистрация: 03.11.2016 Сообщений: 292 Записей в блоге: 2
	28.03.2017, 17:59	4
	Цсс в моем посте и есть этот способ, просто добавить его надо в конец вашего Цсс 1

	29.03.2017, 12:05

Опции темы

Создать форму

Решение