时间戳

首页 > 解决方案 > 代码审查简单框和表单代码html5 css3

html - 代码审查简单框和表单代码html5 css3

问题描述

根据规范，我编写了一个小表单，它是更大网页的一部分，我正在采取小步骤。

我很好奇我是否能以某种方式做得更好。如果我可以简化代码或使用其他更好的命令或语法？

也许有一些裁员？

还有一种移动“发送”按钮的好方法，使其居中居中，有没有办法将其移动到底部而不会有太多麻烦？或者将占位符文本移到靠近左侧？

我将附上笔的链接，您可以在那里查看代码。

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>

标签： htmlcssoptimization

解决方案

我通过添加边距属性来调整按钮的位置和注释变换属性来更改您的代码。但是如果您可以使用引导程序或材料设计之类的样式库，则可以更快地整理出表格

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>

推荐阅读