CODEWITHSUNDEEP
phphtmlcomments
Max Visna
Max Visna

Reputation: 41

Moving comment box on the webpage

My question is rather simple. But I am seriously stack as I have never done moving commentary box and nor applying it before.

Here is the code of a comment box I got from a free source:

<form method='post'>
  <div class="name">NAME: <input type='text' name='name' id='name' /><br /></div>

  Comment:<br />
  <textarea name='comment' id='comment'></textarea><br />

  <input type='hidden' name='articleid' id='articleid' value='<? echo $_GET["id"]; ?>' />

  <input type='submit' value='Submit' />  
</form>

And now I am trying to position it so it fits nicely on my page. I managed to move it on the page by putting the whole piece of code in a div, but when it comes to Name and comment fields even I am not sure what to do. Would be great to see some insights.

Upvotes: 0

Views: 645

Answers (1)

JamesG
JamesG

Reputation: 532

I would recommend using Bootstrap to make a clean design of your form.

Add Bootstrap to your Head of your HTML page:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

Then you can modify your form code to use Bootstrap containers, form-groups and form-control classes to structure and style your code. See here for more details. form-group group label's and input fields together removing the need to create custom css or use html breaks to change the structure of the page. form-control adds Bootstrap styling to the input fields.

I created an example from your code sample above using Bootstrap:

<div class="container">
<div class="row">
    <div class="col-md-12">
        <h1>Example Form</h1>
        <form>
            <div class="form-group">
                <label for="nameInput">Name</label> <input class="form-control" id="nameInput" placeholder="Name" type="text">
            </div>
            <div class="form-group">
                <label for="commentInput">Comment</label> 
                <textarea class="form-control" id="commentInput"></textarea>
            </div>
            <input id='articleid' name='articleid' type='hidden' value='&lt;? echo $_GET["id"]; ?&gt;'>
            <button class="btn btn-primary" type="submit">Submit</button>
        </form>
    </div>
</div>

See code pen to view the form - http://codepen.io/jamesg1/pen/ALAZKg

Upvotes: 1

Related Questions