Moving comment box on the webpage - php

Question

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.

Answer 1

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='<? echo $_GET["id"]; ?>'>
<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