2016-10-03 73 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>