ウェブページのコメントボックスを移動する

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フィールドとコメントフィールドについても、何をすべきかわかりません。いくつかの洞察を見るのはすばらしいでしょう。

Answer 1

フォームをクリーンなデザインにするためにブートストラップを使用することをおすすめします。

は、HTMLページのあなたの頭にBootstrapを追加します。

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

次に、あなたが構築し、コードのスタイルをブートストラップコンテナ、フォーム・グループおよびフォームコントロールクラスを使用するようにフォームのコードを変更することができます。詳細はhereを参照してください。 form-groupグループのラベルと入力フィールドを合わせて、カスタムCSSを作成する必要がなくなります。また、ページの構造を変更するためにHTMLブレークを使用する必要もありません。 form-controlは、ブートストラップスタイリングを入力フィールドに追加します。

私はブートストラップを使用して、上記のコードサンプルから例を作成しました：

<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