How to align the text field?-CodePudding

.ourform {
  padding: 100px 100px;
  background-color: white;
  border: 5px solid black;
  border-radius: 20px;
  margin: 400px;
  margin-top: 180px;
}

h1 {
  text-align: center
}

input[type=text],
input[type=email],
select {
  width: 100%;
  padding: 12px 200px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid black;
  border-radius: 4px;
  box-sizing: border-box;
}

input[type=submit] {
  width: 25%;
  background-color: #D39D10;
  color: black;
  padding: 14px 50px;
  margin: 20px 250px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

input[type=submit]:hover {
  background-color: green;
}

<div >
  <form action="/">

    <h1> Donation Form</h1>
    <label for="name">Name</label>
    <input type="text" id="name" name="name" placeholder="Your name...">

    <label for="email">Email</label>
    <input type="email" id="email" name="email" placeholder="Your email address...">

    <label for="num">Contact No.</label>
    <input type="text" id="num" name="num" placeholder="xxx xxxxxxx">
    <input type="submit" value="Submit">
  </form>
</div>

Here is the result. Most of the time the text area will be aligned on the left by default but mine I don't know how it aligns to the center and as you can see the placeholder just shows half of the word. How can I fix this? If you don't mind explaining about the mistake it would be very grateful. :)

CodePudding user response：

https://jsfiddle.net/15npsmqd/

I think the padding of 200px is causing the issue.

Changed it to 20px.

Please have a look at the fiddle for better view.

input[type=email]{
width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid black;
  border-radius: 4px;
  box-sizing: border-box;
}

<input type="email" placeholder="Enter your email address..." />

CodePudding user response：

It's like this because of your padding value, it's like this because of padding 200px

input[type=text],
input[type=email],
select {
  width: 100%;
  padding: 12px 14px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid black;
  border-radius: 4px;
  box-sizing: border-box;
}

and more detail about padding properies https://www.w3schools.com/css/css_padding.asp

CodePudding user response：

if you want the input value to be in the middle, just enough set input text-align="center" And remove the padding-right and change to this

padding = "12px"

h1 {
    text-align: center
}

input[type=text],
input[type=email],
select {
    width: 100%;
    padding: 12px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid black;
    border-radius: 4px;
    box-sizing: border-box;
    text-align: center;
}

input[type=submit] {
    width: 25%;
    background-color: #D39D10;
    color: black;
    padding: 14px;
    margin: 20px 250px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    text-align: center;
}

input[type=submit]:hover {
    background-color: green;
}

            <div >
                <form action="/">

                    <h1> Donation Form</h1>
                    <label for="name">Name</label>
                    <input type="text" id="name" name="name" placeholder="Your name...">

                    <label for="email">Email</label>
                    <input type="email" id="email" name="email" placeholder="Your email address...">

                    <label for="num">Contact No.</label>
                    <input type="text" id="num" name="num" placeholder="xxx xxxxxxx">
                    <input type="submit" value="Submit">
                </form>
            </div>

CodePudding user response：

You are using 200px and 250px in padding and margin.

Also try to use % as the unit of height, width, padding, margin ...

.ourform {
  padding: 10px 10px;
  background-color: white;
  border: 5px solid black;
  border-radius: 20px;
  margin: 40px;
  margin-top: 18px;
}

h1 {
  text-align: center
}

input[type=text],
input[type=email],
select {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid black;
  border-radius: 4px;
  box-sizing: border-box;
}

input[type=submit] {
  width: 25%;
  background-color: #D39D10;
  color: black;
  padding: 14px 50px;
  margin-left: 40%;
  margin-right: 30%;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

input[type=submit]:hover {
  background-color: green;
}

<div >
  <form action="/">

    <h1> Donation Form</h1>
    <label for="name">Name</label>
    <input type="text" id="name" name="name" placeholder="Your name...">

    <label for="email">Email</label>
    <input type="email" id="email" name="email" placeholder="Your email address...">

    <label for="num">Contact No.</label>
    <input type="text" id="num" name="num" placeholder="xxx xxxxxxx">
    <input type="submit" value="Submit">
  </form>
</div>