CODEWITHSUNDEEP
htmlcss
skillet
skillet

Reputation: 5

My text inside my textbox aligns to the left center side. How do I remove this?

I am attempting to create a textbox in which the user of my webpage can type inside. However, I am unable to allow the text to start at the top of the box and go down. In contrast, it stays in the center left and simply keeps going in one line. How can I align and break the text so that it may wrap around the box?

I've tried removing certain parts of the code that could be dedicated to text, but none of that worked. I also looked at other examples, but none worked. 

<!doctype html>

<html>
<head><title> css </title></head>
<body>
<body style="background-color:lightgray;">
<style>
ul.a {
  list-style-type: circle;
}
body {
    font-family: "Arial"; font-size: 17px;
}
ul {
    text-align: left;
}
input[type=text], select {
  width: 90%;
  padding: 12px 20px;
  margin: 8px 0;
  display: block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}
}
input[type=submit] {
  width: 100%;
  background-color: #4CAF50;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

</style>

<center><div style="width:100px;height:60px;border:0px solid #000;"></div>
<div style="width:1000px;height:500px;border:1.5px solid #000;">
<body>
<p><strong> ? </strong></p><hr>
<ul class="a">
    <li>?</li>
    <li>?</li>
    <li>?</li>
</ul>

`    <texterea action="/action_page.php" target="_blank">
      <p><input class="w3-input w3-padding-100px w3-border" type="text" placeholder="Message" required name="Message" style="height:200px"></p>
      <p><button class="w3-button w3-light-grey w3-block" type="submit">SEND</button></p>
    </texterea>

</div></center>
</body></html>

I want the text to be able to wrap the box, but it is just continuously in the center, which is very annoying.

Upvotes: 0

Views: 120

Answers (3)

thishandle
thishandle

Reputation: 96

Your <textarea> tag should be nested in a <form> tag. You're close, you just look to be confusing your nesting/tags .

I think you want to do something like this :

<form action="/action_page.php" target="_blank">
  <p><textarea class="w3-input w3-padding-100px w3-border" placeholder="Message" required name="Message" style="height:200px"></textarea></p>
  <p><button class="w3-button w3-light-grey w3-block" type="submit">SEND</button></p>
</form>

Upvotes: 1

Dylan Anlezark
Dylan Anlezark

Reputation: 1267

Here is an example of what i think you are after: https://jsfiddle.net/zjs2ugLy/1/

One of the biggest issues you have is you have a typo in textarea (texterea)

CSS 

body {
 background-color:lightgray;
 font-family: "Arial"; font-size: 17px;
}

ul.a {
 list-style-type: circle;
}

ul {
  text-align: left;
}

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


input[type=submit] {
 width: 100%;
 background-color: #4CAF50;
 color: white;
 padding: 14px 20px;
 margin: 8px 0;
 border: none;
 border-radius: 4px;
 cursor: pointer;
}

HTML 

 <html>
  <head><title> css </title></head>
   <body>
   <center>
    <div style="width:100px;height:60px;border:0px solid #000;"></div>

    <div style="width:1000px;height:500px;border:1.5px solid #000;">
     <p><strong> ? </strong></p><hr>
     <ul class="a">
      <li>?</li>
      <li>?</li>
      <li>?</li>
    </ul>

     <form action="/action_page.php">
      <textarea rows="4" cols="50" target="_blank"></textarea>
      <p><button class="w3-button w3-light-grey w3-block" type="submit">SEND</button></p>
    </form
  </div>

  </center>
 </body>
</html>

Upvotes: 0

MichaelvE
MichaelvE

Reputation: 2578

You appear to be confusing the textarea with input type text. Input type text is used for single line input, and textarea works as a text box for paragraph type input. All input tags should be placed within the form tag, and it's the form tag that sets the target for the form's submission:

<style>body {
  background-color: lightgray;
}

ul.a {
  list-style-type: circle;
}

body {
  font-family: "Arial";
  font-size: 17px;
}

ul {
  text-align: left;
}

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


}
input[type=submit] {
  width: 100%;
  background-color: #4CAF50;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
</style>
<center>
  <div style="width:100px;height:60px;border:0px solid #000;"></div>
  <div style="width:1000px;height:500px;border:1.5px solid #000;">
    <p><strong> ? </strong></p>
    <hr>
    <ul class="a">
      <li>?</li>
      <li>?</li>
      <li>?</li>
    </ul>
    <form action="/action_page.php">
      <textarea rows="10" cols="60" placeholder="Message"></textarea>
      <p><button class="w3-button w3-light-grey w3-block" type="submit">SEND</button></p>
    </form>
  </div>
</center>

Upvotes: 0

Related Questions