만들기 입력 폼 상자

-1

지금은 몇 일에서 몇 가지 html 코드를 해왔지만, 난 그냥이 exsampel처럼, 모든 수평 모양으로 만드는 방법을 알아낼 수 없습니다 :만들기 입력 폼 상자

ID  Name  Commodity Weight Tolerance 
Box  Box  drop down box   box

그래서 상자는 "입력 양식"ofc를 의미하며 드롭 다운은 내 데이터베이스의 상품 이름으로 가득해야합니다.

지금, 나는 지금까지이 코드를 가지고 :

<body> 

<div id="header"> 
    <h2 align="center" style="color: #FFFFFF">Edit Recept</h2> 
</div> 

<div id="content"> 
    <div id="form-wrapper"> 
     <form method="post" action="Front"> 

     <table> 

       <tr> 
        <td>ID: <td> 
        <td><input type="text" name="Id" /> 
       </tr> 

       <tr> 
        <td>Name:<td> 
        <td><input type="text" name="name" /> 
       </tr> 

     </table> 

     <table> 
       <tr> 

       <p>  </p> 
       <p>Add commodities to your recept: <p> 
       </tr> 
       <tr> 

        <td>Select commodity:<td> 
        <td><select> 
          <option value="" disabled="disabled" selected="selected">Please select Commodity</option> 
          <option value="1">One</option> 
          <option value="2">Two</option> 
         </select> 
       </tr> 

       <tr> 

        <td>Weight:<td> 
        <td><input type="text" name="tolerance" /> 
       </tr> 

       <tr> 
        <td>Tolerance:<td> 
        <td><input type="text" name="name" /> 
       </tr> 
       <tr> 
        <td><input type="submit" value="Add" /><td> 
       <tr>  
     </table> 
       <br> 
       <input type="submit" value="Save" /> 
       <input type="reset" value="Cancel" /> 
       <input type="hidden" name="whichPage" value="prescription"/> 


     </form> 

    </div> 
    <p align="center"> 
     Enter the new values and press save to make the change 
    </p> 
</div>

쉽게 수행하는 방법 트릭이 있습니까? 내 목표는 상단에 설명 된 것처럼 만들고 동일한 처방전에 더 많은 상품을 저장하려는 경우 입력란의 새 줄을 추가하는 단추를 추가하는 것입니다.

출처

2014-06-11 Pixel

버튼과 관련하여 아무 것도 시도하지 않은 것 같습니다. 몇 가지 조사를 해보고 직접 시험해보십시오 ... 간단한 Google 검색을 통해 수천 가지 사례를 얻을 수 있습니다 ... –

레이블을 모두 테이블의 한 행에 모두 넣으면 두 번째 행 아래의 입력란은 jsut이어야합니다. 원하는대로 열 단위 기반 입력을 갖게됩니다. 여기서는 a fiddle as a sample입니다.

<div id="header"> 
    <h2 align="center" style="color: #FFFFFF">Edit Recept</h2> 
</div> 

<div id="content"> 
<div id="form-wrapper"> 
    <form method="post" action="Front"> 

    <table> 

     <tr> 
     <td>ID </td> 
     <td>Name</td> 
     <td>Select commodity</td> 
     <td>Weight</td> 
     <td>Tolerance</td> 

     </tr> 

     <tr> 
     <td><input type="text" name="Id" /></td> 
     <td><input type="text" name="name" /></td> 
     <td><select> 
      <option value="" disabled="disabled" selected="selected">Please select Commodity</option> 
      <option value="1">One</option> 
      <option value="2">Two</option> 
     </select></td> 
     <td><input type="text" name="tolerance" /></td> 
     <td><input type="text" name="name" /></td> 
     </tr> 
    </table> 

    <br /> 
    <input type="submit" value="Save" /> 
    <input type="reset" value="Cancel" /> 
    <input type="hidden" name="whichPage" value="prescription"/> 
    </form> 

</div> 
<p align="center"> 
    Enter the new values and press save to make the change 
</p> 
</div>

참고 : 일부 누락 및 일부 행에 폐쇄 한 대신 오픈 태그를 소개하고 같이 테이블 요소 마크 업에 대한 닫는 태그에주의를 기울여야한다.

출처

2014-06-11 08:21:31 tmarwen

정말 멋지다. 내가 말했듯이 사용자가 처방전에 더 많은 상품을 추가하고 싶다고 말하면 "새로운 상품"또는 이와 비슷한 다른 버튼을 만들 예정입니다. 그러면 다른 사용자 아래에 5 개의 입력 상자가 추가로 열려 있어야 저장하기 전에 새 입력 상자를 선택할 수 있습니다. 간편한 방법이 있나요? 어쩌면 내가 JSP 파일로 바꿀 수 있을까? – Pixel

샘플 JavaScript 코드로 처리 할 수 있습니다. 먼저 자신 만의 것을 시도해 보셔야합니다. 언제든지 환영합니다. 주제 링크에 사인을 할 수 있으며 기꺼이 도와 드리겠습니다. 지금까지 당신은 대답을 받아 들일 수 있습니다 또는 만약 당신이 만족한다면 upvote :) – tmarwen

예 ofcause, 나는 이것에서 차갑게 만들려고 :) 감사합니다 지금까지. – Pixel

작은 힌트. 그러면 텍스트와 입력 상자가 서로 아래에 표시됩니다. 그러나 적절한 방식으로 테이블 전체를 재정렬해야합니다. 또한 여러 테이블을 사용하지 마십시오. 많은 열이있는 단일 테이블을 사용하십시오.

<table> 
    <tr> 
     <td>ID: </td> 
     <td>Name:</td> 
    </tr> 

    <tr> 
     <td><input type="text" name="Id" /></td> 
     <td><input type="text" name="name" /></td> 
    </tr> 
</table>

출처

2014-06-11 08:10:04

고마워하여 해결하십시오. –

이름 상자에 ID와 같은 이름을 붙이려면 어떻게합니까? 당신이 보는 경우에, 이름은 다량 권리에이다. http://jsfiddle.net/pixeldk/TFPX2/ – Pixel

미안하지만 내 대답은 오타였습니다. 내 코드를 업데이트했습니다. 지금 그것을 확인하십시오. –

만들기 입력 폼 상자

답변

관련 문제