CODEWITHSUNDEEP
htmlcss
Foederat
Foederat

Reputation: 3

Input "date" field won't align with other fields in HTML

I'm doing a course on HTML5 and am supposed to create a registration form. I am only allowed to change the .html file and not the .css file, and I managed to align all the input fields nicely, except for the "date" input field. And I have no idea how to make it the same size as others without modifying the .css file.

I have put all the parts of the form into a table, which helped align everything nicely, except for the "date" input field. Does anyone have any clue why this is happening and is there any way to align then in a different way? Putting them in a table was my only idea.

header{
	width: 100%;
	height: 80px;
	background-color: #cc6533;
	display: inline-block;
}

header a:hover{
	color: orange;
}
h1{
	margin: 13px 15px 12px 13px;

	color:black
}
input{
	border: 1px solid #cc6533;
  border-radius: 4px 0px 0px 4px;
}
form{
	margin: 47px 0px 0px 34px;
}
#container{
	margin-left: 11px;
	width: 500px;
	height: 300px;
	border-radius: 4px;
	border: 1px solid #cc6533
}
button{
	border-radius: 4px;
    border: none;
    padding: 4px 9px 5px 10px;
    margin: 6px 0px 0px 452px;
    background-color: #cc6533;
}
select{
	border-radius: 0px 4px 4px 0px;
    border: none;
    background-color: #cc6533;
    padding: 1px;
}
<!DOCTYPE html>
<html>
<head>
  <link rel="icon" href="favicon.png" type="image/png">
  <title>Destiny</title>
  <link href="mystyle.css" rel="stylesheet" type="text/css">
</head>
<body>
  <h1>
 Registration Form 
</h1> 
<main id= "container">
<form >
  <table width= "100%">
  <tr>
    <td >Name:</td>
    <td ><input  type="text"></input></td>
  </tr>
  
  <tr>
    <td>Date of Birth:</td>
    <td><input type="date"></input></td>
  </tr>

  <tr>
    <td>Country:</td>
    <td>
    <input list = "countries">
    <datalist id = "countries">
    <option value ="India">
    <option value ="United States">
    <option value ="United Kingdom">
    <option value ="Australia">
    <option value ="France">
    </datalist>
    </input></td>
  </tr>

  <tr>
    <td>Phone number:</td>
    <td><input type="tel"></input></td>
  </tr>

  <tr>
    <td>Email:</td>
    <td><input type="email"></input></td>
  </tr>

  <tr>
    <td>website:</td>
    <td><input type="url"></input></td>
  </tr>
</table>
</form>

</main>
<button>
Submit
</button>
</body>

Upvotes: 0

Views: 813

Answers (4)

cloned
cloned

Reputation: 6752

The other answers are pointing out the underlying problem, you need to set the correct width for your input field.

Since you write you do an HTML5 course then you should also use the correct, semantic elements. So you should use label for your input fields and if you really can't change the CSS file then use inline css. But don't use tables for aligning your inputs, that's not very HTML5. 

header {
  width: 100%;
  height: 80px;
  background-color: #cc6533;
  display: inline-block;
}

header a:hover {
  color: orange;
}

h1 {
  margin: 13px 15px 12px 13px;
  color: black
}

input {
  border: 1px solid #cc6533;
  border-radius: 4px 0px 0px 4px;
}

form {
  margin: 47px 0px 0px 34px;
}

#container {
  margin-left: 11px;
  width: 500px;
  height: 300px;
  border-radius: 4px;
  border: 1px solid #cc6533
}

button {
  border-radius: 4px;
  border: none;
  padding: 4px 9px 5px 10px;
  margin: 6px 0px 0px 452px;
  background-color: #cc6533;
}

select {
  border-radius: 0px 4px 4px 0px;
  border: none;
  background-color: #cc6533;
  padding: 1px;
}
<h1>
  Registration Form
</h1>
<main id="container">
  <form>

    <div style="display:flex; margin-bottom: 7px;">
      <label for="name" style="width: 35%">Name:
    </label>
      <input id="name" style="width: 40%">
    </div>
    <div style="display:flex; margin-bottom: 7px;">
      <label for="dob" style="width: 35%">Date of Birth
    </label>
      <input id="dob" type="date" style="width: 40%">
    </div>
    <div style="display:flex; margin-bottom: 7px;">
      <label for="country" style="width: 35%">Country:</label>

      <input list="countries" id="country" style="width: 40%">
      <datalist id="countries">
    <option value="India">
    <option value="United States">
    <option value="United Kingdom">
    <option value="Australia">
    <option value="France">
    </datalist>

    </div>

    <div style="display:flex; margin-bottom: 7px;">
      <label for="phone" style="width: 35%">Phone number:</label>
      <input type="tel" style="width: 40%" id="phone">
    </div>

    <div style="display:flex; margin-bottom: 7px;">
      <label for="mail" style="width: 35%">Email:</label>
      <input type="email" id="mail" style="width: 40%">
    </div>

    <div style="display:flex; margin-bottom: 7px;">
      <label for="website" style="width: 35%">website:</label>
      <input type="url" id="website" style="width: 40%">
    </div>

  </form>

</main>
<button>
Submit
</button>

Upvotes: 0

Md Sabbir Hossain
Md Sabbir Hossain

Reputation: 200

You Can Try to This Way. I Think It Will Work Properly,

header{
    width: 100%;
    height: 80px;
    background-color: #cc6533;
    display: inline-block;
}

header a:hover{
    color: orange;
}
h1{
    margin: 13px 15px 12px 13px;

    color:black
}
input{
    border: 1px solid #cc6533;
  border-radius: 4px 0px 0px 4px;
}
form{
    margin: 47px 0px 0px 34px;
}
#container{
    margin-left: 11px;
    width: 500px;
    height: 300px;
    border-radius: 4px;
    border: 1px solid #cc6533
}
button{
    border-radius: 4px;
    border: none;
    padding: 4px 9px 5px 10px;
    margin: 6px 0px 0px 452px;
    background-color: #cc6533;
}
select{
    border-radius: 0px 4px 4px 0px;
    border: none;
    background-color: #cc6533;
    padding: 1px;
}
.dateField{
	width:52%;
}
<!DOCTYPE html>
<html>
<head>
  <link rel="icon" href="favicon.png" type="image/png">
  <title>Destiny</title>
  <link href="mystyle.css" rel="stylesheet" type="text/css">
</head>
<body>
  <h1>
 Registration Form 
</h1> 
<main id= "container">
<form >
  <table width= "100%">
  <tr>
    <td >Name:</td>
    <td ><input  type="text"></input></td>
  </tr>

  <tr>
    <td>Date of Birth:</td>
    <td><input type="date" class="dateField"></input></td>
  </tr>

  <tr>
    <td>Country:</td>
    <td>
    <input list = "countries">
    <datalist id = "countries">
    <option value ="India">
    <option value ="United States">
    <option value ="United Kingdom">
    <option value ="Australia">
    <option value ="France">
    </datalist>
    </input></td>
  </tr>

  <tr>
    <td>Phone number:</td>
    <td><input type="tel"></input></td>
  </tr>

  <tr>
    <td>Email:</td>
    <td><input type="email"></input></td>
  </tr>

  <tr>
    <td>website:</td>
    <td><input type="url"></input></td>
  </tr>
</table>
</form>

</main>
<button>
Submit
</button>
</body>

Upvotes: 3

Shadow
Shadow

Reputation: 244

Use same with for all inputs, suppose, you given width:400px to all inputs, now use code for <input type="date" />

input[type="date"]{
width:calc(400px +1px);
}

Upvotes: 0

vssadineni
vssadineni

Reputation: 454

just add style tag in your html as shown below. and here is the link to codepen for your example.

<head>
  <link rel="icon" href="favicon.png" type="image/png">
  <title>Destiny</title>
  <link href="mystyle.css" rel="stylesheet" type="text/css">
  <style>
  input{
    display:block;
    width:50%;
  }
  </style>
</head>

Upvotes: 0

Related Questions