🐨CoalaCoding
DocsExamplesTry itBoardB반
🐨CoalaCoding

개발자를 위한 한국어 웹 기술 문서

문서

  • JavaScript
  • Web Publishing
  • React
  • Python

커뮤니티

  • 게시판
  • 예제 모음
  • Try it 에디터

기타

  • GitHub
  • 관리자
© 2026 CoalaCoding. All rights reserved.
  • 01_변수
  • 02_mask
  • 03_기본문법과-선택자
  • 04_네스팅
  • 05_svg
  • 06_가로스크롤
  • 07_문자
  • 08_반응형-폰트크기
  • 09_문단
  • 10_리퀴드글래스
  • 11_배경
  • 12_세로정렬
  • 13_박스모델
  • 14_레이아웃
  • 15_트랜지션과-애니메이션
  • 10_svg
  • 11_폼디자인
  • 12_clamp(),min(),max()
  • 14_calc
  • 15_animation
  • 16_transition
  • 1_선택자
  • 2_hover효과
  • 3_var
  • 4_클립패스
  • 5_마스크
  • 6_containerQuery
  • 7_retina
  • 8_반응형 햄버거메뉴
  • 9_transform
  • 05_ 반응형 디자인과 접근성
  1. 홈
  2. 문서
  3. HTML & CSS
  4. CSS
  5. 11_폼디자인

11_폼디자인

코드 블록의 Try it Yourself 버튼으로 직접 실행할 수 있다.

구문

1. form 요소 디자인

1.1. 큰 체크박스,라디오버튼

<form action="#" method="get">
    <div class="checkbox">
        <input type="checkbox" name="check1" id="check1" value="1" class="checkbox1" />
        <label for="check1">큰체크박스</label>
        <input type="radio" name="radio1" id="radio1" value="1" class="checkbox1" />
        <label for="radio1">큰라디오버튼</label>
    </div>
</form>

1.2. 디자인 체크박스

<form action="#" method="get">
    <div class="checkbox">
        <input type="checkbox" name="check2" id="check2" value="2" class="checkbox2" />
        <label for="check2">디자인체크박스</label>
    </div>
</form>

1.3. 토글스위치

<form action="#" method="get">
    <div class="toggle">
        <input type="checkbox" name="toggle1" id="toggle1" value="1" />
        <label for="toggle1">스위치</label>
    </div>
</form>

1.4. select 디자인 초급

<form action="#" method="get">
    <select>
        <option selected>사이즈</option>
        <option>S</option>
        <option>M</option>
        <option>L</option>
    </select>
</form>

1.5. select 디자인 고급

<form action="#" method="get">
    <fieldset class="selectbox">
        <legend class="blind">색상을 선택하세요</legend>
        <label for="select">옵션</label>
        <select id="select">
            <option selected>색상</option>
            <option>Red</option>
            <option>Black</option>
            <option>Green</option>
        </select>
    </fieldset>
</form>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

1.6. 검색창 디자인

<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet" />

<form action="#" method="get">
    <div class="search_wrap">
        <span class="icon"><i class="fa fa-search"></i></span>
        <input type="search" id="search" placeholder="Search..." />
    </div>
</form>

목차

  • 구문