웹 페이지에서 댓글 상자 이동하기

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에 전체 코드 조각을 넣음으로써 페이지에서이 코드를 옮길 수 있었지만 이름과 주석 필드에 대해서도 무엇을해야할지 모르겠습니다. 약간 통찰력을 보는 것이 좋을.

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> 

참조 코드 펜 형태로 볼 -