2016-10-03 94 views
-1

我正在嘗試創建一個具有以下HTML表單功能的網頁。我能夠創建基本代碼;然而,當我在瀏覽器中訪問該頁面時,所有內容都會變得非常擁擠並緊密相連,我只是想知道是否有人能夠幫助我正確地分配內容。下面是我的代碼什麼的間距應該是這樣的: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>