HTML Form How to - Make the input field the same width

Question

We would like to know how to make the input field the same width.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
label {<!--from  w  w  w  . j a  va2 s.  c om-->
  display: inline-block;
  width: 95px;
}

input {
  box-sizing: border-box;
  width: calc(100% - 100px);
}
</style>
</head>
<body>
  <form>
    <label for="name">Name:</label> 
    <input id="name" /> 
    <label for="email">Email:</label>
    <input id="email" />
  </form>
</body>
</html>

The code above is rendered as follows: