테이블이없이 CSS로 기본폼 만들기 > 자유게시판

자유게시판

테이블이없이 CSS로 기본폼 만들기 정보

기타 테이블이없이 CSS로 기본폼 만들기

첨부파일

CSS_폼.html (1.4K) 59회 다운로드 2005-06-13 14:53:04

본문

양넘싸이트에서 뽀려왔습니다. -_-);;

<style>
div.row {
  clear: both;
  padding-top: 5px;
  }

div.row span.label {
  float: left;
  width: 100px;
  text-align: right;
  }

div.row span.formw {
  float: right;
  width: 235px;
  text-align: left;
}

</style>

The CSS above also gives widths for the SPANs. These can be absolute values like the example, or percentages that add up to 100% or slightly less, depending on padding and borders (and the box model you are designing for). In the example I have wrapped the form in another DIV to give it a border and a background.

The example HTML looks like:

<div style="width: 360px; background-color: #ccc;
border: 1px dotted #333; padding: 5px;
margin: 0px auto";>
  <form>
    <div class="row">
      <span class="label">Name:</span><span
class="formw"><input type="text" size="25" /></span>
    </div>
    <div class="row">
      <span class="label">Age:</span><span
class="formw"><input type="text" size="25" /></span>
    </div>
    <div class="row">
      <span class="label">Shoe size:</span><span
class="formw"><input type="text" size="25" /></span>
    </div>
    <div class="row">
      <span class="label">Comments:</span><span
class="formw">
        <textarea cols="25" rows="8">
        Go ahead - write something...
        </textarea>
      </span>
    </div>
  <div class="spacer">
  &nbsp;
  </div>
 </form>

</div>
추천
0

댓글 4개

기본 폼의 형태만 출력되는 것이 맞나요?
아무래도, 어제 올려 놓은 자료를 바탕으로, 한번 바꿔봐야 겠습니다.
게시판 연동이야 어차피 모르는(^^) 부분이니, 차치하고서라도...
전체 196,490 |RSS
자유게시판 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1402호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT