CODEWITHSUNDEEP
htmlcss
Taylor
Taylor

Reputation: 3141

Add multiple lines in a text box in HTML

I'm trying to have my text box multiple lines while keeping the design. I am fairly new to HTML/CSS so please let me know how you do this guys.

And Also, I'm trying to make the button right in the centre of the text box at the bottom.

This is my code right now:

<html>
    <body>
        <form name="form" method="post">

        <style>
      input.maintext {
    background: white;
    border: 1px double #DDD;
    border-radius: 5px;
    box-shadow: 0 0 5px #333;
    color: #666;
    float: left;
    padding: 5px 10px;
    width: 305px;
    outline: none;

}

</style>
<style>

.savebutton {
    -moz-box-shadow: 0px 0px 0px 0px #3dc21b;
    -webkit-box-shadow: 0px 0px 0px 0px #3dc21b;
    box-shadow: 0px 0px 0px 0px #3dc21b;
    background-color:#44c767;
    -moz-border-radius:34px;
    -webkit-border-radius:34px;
    border-radius:34px;
    border:1px solid #51b05a;
    display:inline-block;
    cursor:pointer;

    color:#ffffff;
    font-family:arial;
    font-size:19px;
    padding:3px 16px;
    text-decoration:none;
    text-shadow:0px 1px 0px #2f6627;
}
.myButton:hover {
    background-color:#79cf4b;
}
.myButton:active {
    position:relative;
    top:1px;
}


</style>



            <input type="text" class="maintext" name="text_box"/>
            <br>
            <br>

            <input type="submit" class="savebutton" id="search-submit"  value="Save" />

        </form>
    </body>
</html>
<?php
    if(isset($_POST['text_box'])) { //only do file operations when appropriate
        $a = $_POST['text_box'];
        $myFile = "t.txt";
        $fh = fopen($myFile, 'w') or die("can't open file");
        fwrite($fh, $a);
        fclose($fh);
    }
?>

Upvotes: 0

Views: 5410

Answers (3)

Aaron Krauss
Aaron Krauss

Reputation: 7614

To center a button, with it already being in a block element (form, in this case) all you would need to add is this to your CSS:

text-align: center;

And durbnpoisn nailed it on the html - use a text area.

http://www.w3schools.com/tags/tag_textarea.asp

Edit:

Just reread the question. You can't center an element related to one of its siblings - only its parent. What you would want to do is have the textarea expand the whole form with:

width: 100%;

and then the button will be center aligned with both the textarea and the form

Upvotes: 0

durbnpoisn
durbnpoisn

Reputation: 4669

You cannot put multiple lines in an 

<input type="text">

For that you would need:

<TEXTAREA></TEXTAREA>

Every other thing about your code from the CSS to the JavaScript will work exactly the same.

Upvotes: 4

Eujinks
Eujinks

Reputation: 400

Put the buttom inside the text box, the margin-top till you reach the bottom and margin-left:auto; margin-right:auto;

Also you can keep the style tags open while you style the second element btw

Upvotes: -1

Related Questions