2016-10-03 4 views
-1

次のHTMLフォームの機能を持つWebページを作成しようとしています。私は基本的なコードを作成することができます。しかし、私がブラウザのページにアクセスすると、すべてが非常に窮屈になり、一緒に閉じ込められます。HTML/PHPフォームの作成

<html> 

<form action = "comment_process.php" method = "post"> 
    Name: 
    <input type = "text" name = "name"/> <br> 

    Do you like this page? 
    <input type = "radio" name = "answer" value = "Yes"> Yes 
    <input type = "radio" name = "answer" value = "No"> No <br> 

    Comment: 
    <textarea rows="3" cols="50" name = "name"/> </textarea> <br> 

    Rating 
    <select name = "rating"> <br> 
     <option value = "0"> 1 </option> 
     <option value = "0"> 2 </option> 
     <option value = "0"> 3 </option> 
     <option value = "0"> 4 </option> 
     <option value = "0"> 5 </option> 
    <input type = "submit" value = "go"/> 
</form> 

</html> 

Project

+0

CSSはありますか? – Johannes

答えて

1

Bootstrapずつ解決策があります:以下は私のコードとどのような間隔はのようになりますです。私はあなたのプロジェクトに非常に役立つと思います。試してみる必要があります。

結果です。


enter image description here


code snippetがあります。

完全なコードがあります。

<!DOCTYPE html> 
<html> 

<head> 
    <link data-require="[email protected]*" data-semver="4.0.0-alpha.2" rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css" /> 
    <script data-require="[email protected]*" data-semver="4.0.0-alpha.2" src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js"></script> 
</head> 

<body> 

    <div class="container"> 

    <form action="comment_process.php" method="post"> 

     <div class="form-group"> 
     <label for="name">Name</label> 
     <input class="form-control" type="text" name="name" /> 
     </div> 

     <div class="form-group"> 
     <label for="answer">Do you like this page?</label> 
     <div class="radio"> 
      <label> 
      <input type="radio" name="answer" value="Yes" /> Yes</label> 
      <label> 
      <input type="radio" name="answer" value="No" /> No</label> 
     </div> 

     </div> 

     <div class="form-group"> 
     <label for="comment">Comment</label> 
     <textarea class="form-control" rows="5" id="comment"></textarea> 
     </div> 

     <div class="form-group"> 
     <label for="rating">Rating</label> 
     <select id="rating" name="rating" class="form-control"> 
      <option value="0"> 1 </option> 
      <option value="0"> 2 </option> 
      <option value="0"> 3 </option> 
      <option value="0"> 4 </option> 
      <option value="0"> 5 </option> 
     </select> 
     </div> 
     <button type="submit" value="go" class="btn btn-primary btn-block">Submit</button> 
    </form> 
    </div> 

</body> 

</html> 
関連する問題