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中来移动它，但是当涉及到Name和comment字段时，我甚至不知道该怎么做。很高兴看到一些见解。

Answer 1

我建议使用Bootstrap对表单进行简洁设计。

将image loader添加到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容器，表单组和表单控件类来构建和设置代码样式。有关详细信息，请参阅Bootstrap。 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>

请参阅代码笔以查看表单 - here

在网页上移动评论框

1 个答案: