1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Making a Text Box in HTML?

Discussion in 'Web Design' started by Mason00, May 5, 2015.

  1. Mason00

    Mason00 Newbie

    Joined:
    May 5, 2015
    Messages:
    39
    Likes Received:
    3
    hey all, so i making a one page website and i need to know how to place a text box. What program do I use? I tried with Dreamweaver but I can't move the text box around. I also want to change the size. No PHP just a text box that you type into and goes no wheres. THIS IS THE LAST PART OF MY WEBSITE! YAY!
     
  2. SamLewis

    SamLewis Regular Member

    Joined:
    Oct 25, 2012
    Messages:
    358
    Likes Received:
    108
    <form>
    <input type="text">
    <input type="submit" value="Submit">
    </form>
     
    • Thanks Thanks x 1
  3. luisk

    luisk Regular Member

    Joined:
    Feb 12, 2014
    Messages:
    441
    Likes Received:
    127
    Occupation:
    Entrepreneur
    Location:
    Some place in South america
    <div align="center">
    <input type="text" name="name">
    </div>

    you need to know how to use align... Have a nice day
     
    • Thanks Thanks x 1
  4. SamLewis

    SamLewis Regular Member

    Joined:
    Oct 25, 2012
    Messages:
    358
    Likes Received:
    108
    or if you dont need an input just
    <textarea></textarea>
     
  5. Titans

    Titans Jr. VIP Jr. VIP

    Joined:
    Oct 20, 2013
    Messages:
    2,415
    Likes Received:
    603
    Gender:
    Male
    Occupation:
    SEO
    Location:
    My Home
    Home Page:
    <form>
    First name:<br>
    <input type="text" name="firstname">
    <br>
    Last name:<br>
    <input type="text" name="lastname">
    </form>
     
  6. Mason00

    Mason00 Newbie

    Joined:
    May 5, 2015
    Messages:
    39
    Likes Received:
    3
    Thank you for the aligned textbox. How do I move it around in dreamweaver? Or do I use a different program with that? PS: I have all Adobe applications. Thanks!
     
  7. Mason00

    Mason00 Newbie

    Joined:
    May 5, 2015
    Messages:
    39
    Likes Received:
    3
    By the way, I am placing the text box ONTO an image.
     
  8. AdludumAndre

    AdludumAndre Registered Member

    Joined:
    Mar 21, 2015
    Messages:
    51
    Likes Received:
    8
    Occupation:
    CTO & Co-Founder of Adludum.com
    Location:
    Germany
    Home Page:
    For this you need to use an absolute position on the textbox.

    Untested example:
    <div style="position: relative;">
    <img src="path/to/image" alt="Your Image" />
    <input type="text" style="position: absolute; bottom: 10px; width: 50%; left: 45%;" />
    </div>
     
    • Thanks Thanks x 1
  9. Seven4

    Seven4 Power Member

    Joined:
    Nov 28, 2013
    Messages:
    684
    Likes Received:
    92
    So, you got like 10+ possible solutions :D

    Designing is always awesome, because you have way more than one way to solve an issue.
     
  10. Mason00

    Mason00 Newbie

    Joined:
    May 5, 2015
    Messages:
    39
    Likes Received:
    3
    Yea, I am MUCH MUCH MUCH better with web design than web developer. Web dev. is for people with brains the size of an elephant. I'm not one of those LOL!
     
  11. ADLUDUM

    ADLUDUM Jr. VIP Jr. VIP

    Joined:
    Mar 30, 2013
    Messages:
    153
    Likes Received:
    45
    Home Page:
    If you want to place the textarea ontop of an image you have to make sure both the image and the textarea are in the same div, so like this:
    <div class="mywrap">
    <img src="http://www.example.com/myimage.jpg"/>
    <div align="center">
    <input type="text" name="name">
    </div>
    </div>

    Then what you have to do is put a position:relative on the .mywrap class and put a height and width to it that's the same as the image:
    .mywrap {
    position: relative;
    width: 500px;
    height: 500px;
    display: block;
    }

    And then you put position:absolute on the div of the textarea
    .mywrap div {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    }

    This will center the textarea with the left, right and margin rules.