How to include multiple lines within an HTML text box

I need help making my text box display multiple lines while maintaining the current design. I am new to HTML/CSS, so any advice on how to achieve this would be greatly appreciated!

Additionally, I want to center the button at the bottom of the text box. Here is my current code:

<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);
    }
?>

Answer №1

It is not possible to input multiple lines in an

<input type="text">

To achieve that functionality, you would need:

<TEXTAREA></TEXTAREA>

All other aspects of your code, including CSS and JavaScript, will function in exactly the same way.

Answer №2

If you want to center a button that is already within a block element (such as a form), simply add the following CSS code:

text-align: center;

Additionally, using a text area, as suggested by durbnpoisn, would be the ideal HTML solution for your case.

For more information on text areas, visit this link.

One important point to remember is that an element can only be centered in relation to its parent, not its siblings. To achieve center alignment with both a textarea and a form, set the width of the textarea to 100%:

width: 100%;

This way, the button will be centrally aligned with both the textarea and the form itself.

Answer №3

Position the button within the text box, adjusting the margin-top until it aligns with the bottom and setting margin-left:auto; margin-right:auto;

Feel free to leave the style tags open as you customize the appearance of the second element.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is a PHP self-generating variable?

Is it possible to use a form variable as its own URL? It may be difficult to explain, but here's an example: matchmaking.php: $search_summoner = $_POST['search_summoner']; echo '<form method="post" action="matchmaking.php?searc ...

Vue.js component still not transitioning out despite using mode="out-in"

As I navigate my way through learning about vue.js, one issue that has been puzzling me is how to make routed pages fade in and out when a user switches to a new page. Despite thinking it would be a simple task with vue, I have been struggling quite a bit ...

`There seems to be an issue with inserting form data into the database using PHP and MySQL`

I am facing an issue with inserting form data into MySQL. After entering the details and submitting, I am unable to see the data in the database. Can someone help me identify the problem? <?php // PHP error reporting setup ini_set('error_repo ...

Prevent a sliding panel from responding if there is no input text by incorporating jQuery

I have a straightforward example of user input and a button that reveals "Hello World" when clicked: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1 ...

The alignment of the elements within the jumbotron is off

Hey there! I'm currently struggling to align the jumbotron with my calendar icon. Unfortunately, the elements of the jumbotron are not lining up properly. Could someone lend a hand in guiding me through this issue? Any ideas would be greatly appreciat ...

Adding Dynamic Shadow to Bootstrap 4 Card

I've been trying to figure out how I can add an animated shadow effect to a Bootstrap 4 Card. Currently, my Cards are arranged like this: Image of Bootstrap Card My objective is to create an animated shadow around the card similar to the one shown i ...

What is the significance of a colon appearing at the start of HTML attribute names in a Vue template?

<circle r="3" :cx="airport.x" :cy="airport.y" class="airport__marker" /> Are the attributes v-bind:cx and v-bind:cy equivalent to what is shown above? ...

CSS horizontal scrolling for unaligned unordered lists

If you take a look at this code snippet, you will notice an issue with the layout http://jsfiddle.net/qo9czztj/ The problem arises when the title of an image is longer than one line, causing the image to shift and creating an uneven appearance within the ...

What is the best character encoding for my website and how can I determine the right one to use?

What is the significance of specifying character encoding in an HTML page and how can I determine which type of character encoding is best for my website? In the past, I always defaulted to using UTF-8 for all HTML pages. However, is there a particular ra ...

The daily scripture quote from the ourmanna.com API may occasionally fail to appear

I've been trying to display the daily verse from ourmanna.com API using a combination of HTML and JS code, but I'm encountering an issue where the verse doesn't always show up. I'm not sure if this problem is on the side of their API or ...

Is there a method in CSS animations that allows for endlessly repeating successive animations in a specified sequence?

While working with CSS animations, I encountered a challenge of making two animations occur successively and repeat infinitely without merging keyframes. Is there a way to achieve this using only CSS? If not, how can I accomplish it using JavaScript? I a ...

Dealing with numerous forms within a single function in Django views

Managing two forms within a single function: Web Page Content <form name="selectgenderform" method = "POST"> <select name='gender'> <option>Male</option> <option>Female</option> </select> & ...

Webpage refreshing when resizing browser

Hey there, I'm facing an issue where my HTML website restarts whenever the browser size changes. Can someone please help me fix this? You can check out my website here I have uploaded my code files here: Code Files Link ...

Slide a floating container downward by one line

I am in search of a way to create a unique text effect resembling a "sidebox" within my writing. The goal is to have a note or heading positioned at the start of a paragraph, floating either to the left or right with some negative space surrounding it and ...

When utilizing the JavaScript createElement() method to create elements on keydown, it will not be compatible with jQuery's draggable() method

I'm currently developing a drag and drop feature for a project, allowing users to add items to a work area and then position them by dragging. I'm facing an issue where I want to create multiple instances of the same element using a key code, but ...

What is the solution to having a div move along with window resizing without displacing adjacent divs?

After much effort, I still can't seem to get this working correctly. I've been playing around with a section named "RightExtra" and a div inside it called "RightExtraContent". My goal is to allow these two divs to move freely when the window is ...

How can the color of a button be changed when a checkbox is clicked?

Is there a way to modify the color of a button when clicked? Once the user has filled in all the fields and checked the checkbox, the button's color should change. new Vue({ el: '#app', data() { return { terms: false, ...

What weakness can be found in my method for encapsulating words within spans?

A piece of code I have looks like this: // separate paragraph words by spans $layer.find('p').each(function(){ var spanned = $(this).html().split(" ").map(function(w){ return '<span class="word">' + w + '</span>&ap ...

Adjust the width of the TinyMCE Editor to automatically resize based on the content being

Is it possible for TinyMCE to adjust the content within an absolutely positioned container and update the width while editing? <div class="container"> <textarea>This is my very long text that should not break. This is my very long text tha ...

jQuery looking to eliminate the need for numerous click events

Check out my latest project on my website: . The site features four colored squares, each with unique classes. I'm looking to streamline the code by implementing if and else statements. However, I'm not sure where to start so I'm reaching o ...