Обзор кода Easy Box и форма кода HTML5 CSS3 - PullRequest
Новая
       1

Обзор кода Easy Box и форма кода HTML5 CSS3

0 голосов
/ 05 марта 2019

Я закодировал небольшую форму, она является частью большой веб-страницы, и я делаю небольшие шаги, в соответствии со спецификацией.

Мне любопытно, мог бы я сделать это как-нибудь лучше.Если бы я мог упростить код или использовать какую-то другую команду или синтаксис, который лучше?

Возможно, есть какие-то избыточности?

Также есть хороший способ переместить кнопку Отправить, чтобы она была в центрев середине и есть ли способ сдвинуть его к основанию без особых хлопот?Или переместить текст заполнителя ближе к левому краю?

Я приложу ссылку к ручке, и вы сможете проверить код там.

https://codepen.io/anon/pen/pYNPrw

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="style.css">
  <title></title>
</head>

<body>
  <form action="#">

    <h2>xyz xyz</h2>
    <div class="input-wrapper">
      <label for="name">Name:</label>
      <input type="text" name="Name" placeholder="Name...." id="name">
    </div>

    <div class="input-wrapper">
      <label for="email">Epost:</label>
      <input type="text" name="Epost" placeholder="Epost...." id="epost">
    </div>

    <button type="submit">Senden</button>
  </form>
</body>

</html>

1 Ответ

0 голосов
/ 06 марта 2019

Я изменил ваш код, добавив свойство margin для настройки положения кнопки и комментируя свойство transform.но если бы вы могли использовать библиотеку стилей, такую ​​как начальная загрузка или дизайн материала, вы могли бы сортировать формы быстрее 

h2 {
    margin: 0;
    padding: 0;
	margin-bottom: 2.3rem;
}

form {
  float: left;
  display: inline-block;
  padding: .5rem;
  height: 205px;
  width: 168px;
  border: 2px solid black;
  font-family: Sans-Serif;
  font-size: 12px;
}

.input-wrapper {
  margin-bottom: .5rem;
}

label {
  width: 50px;
  display: inline-block;
  text-align: left;
 font-family: Sans-Serif;
font-size: 14px;
}

input {
  width: 90px;
  padding: .5rem;
  height: 3px;
  border: 2px solid black;
  text-align: left;
}

button {						
  padding: .5rem;
  display: block;
  width: 55%;	
  background: lightgrey;
  color: black;
  border: 2px solid black;
  text-align: center;
  border-radius: 5px;
  font-size: inherit;
  /* transform: translate(50%, 50%); */
  margin: 60px auto;
  
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="style.css">
  <title></title>
</head>

<body>
  <form action="#">

    <h2>xyz xyz</h2>
    <div class="input-wrapper">
      <label for="name">Name:</label>
      <input type="text" name="Name" placeholder="Name...." id="name">
    </div>

    <div class="input-wrapper">
      <label for="email">Epost:</label>
      <input type="text" name="Epost" placeholder="Epost...." id="epost">
    </div>

    <button type="submit">Senden</button>
  </form>
</body>

</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...