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>