在网页上移动评论框

Question

我的问题很简单。但我真的很累，因为我从来没有移动过评论框，也没有应用过。

这是我从免费来源获得的评论框代码：

<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>

现在我正在尝试调整它的位置，使其与我的页面完美契合。我设法通过将整段代码放在 div 中将其移动到页面上，但是当涉及到名称和评论字段时，我什至不知道该怎么做。很高兴看到一些见解。

Answer 1

我建议使用 Bootstrap 使您的表单设计简洁。

将 Bootstrap 添加到 HTML 页面的标题中：

<!-- 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>

然后您可以修改您的表单代码以使用 Bootstrap 容器、form-groups 和 form-control 类来构建和设置代码样式。有关详细信息，请参阅 here。 form-group 将标签和输入字段组合在一起，无需创建自定义 css 或使用 html 中断来更改页面结构。 form-control 向输入字段添加 Bootstrap 样式。

我使用 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>

见码笔查看表格 - http://codepen.io/jamesg1/pen/ALAZKg

在网页上移动评论框

Moving comment box on the webpage

html

php

comments