w3.css
입력
입력 양식
상위 라벨
입력 양식
예제
<form class="w3-container"> <label>First Name</label> <input class="w3-input" type="text"> <label>Last Name</label> <input class="w3-input" type="text"> </form>
하단 라벨
입력 양식
예제
<form class="w3-container"> <input class="w3-input" type="text"> <label>First Name</label> <input class="w3-input" type="text"> <label>Last Name</label> </form>
입력 카드
머리글
예제
<div class="w3-card-4"> <div class="w3-container w3-green"> <h2>Header</h2> </div> <form class="w3-container"> <label>First Name</label> <input class="w3-input" type="text"> <label>Last Name</label> <input class="w3-input" type="text"> </form> </div>
컬러 라벨
w3-text-color 클래스 중 하나를 사용하여 라벨 색상을 지정한다.
예제
<form class="w3-container"> <label class="w3-text-blue"><b>First Name</b></label> <input class="w3-input w3-border" type="text"> <label class="w3-text-blue"><b>Last Name</b></label> <input class="w3-input w3-border" type="text"> <button class="w3-btn w3-blue">Register</button> </form>
입력 경계
경계가 있는 입력을 생성하려면 w3-border 클래스를 추가한다.
예제
<input class="w3-input w3-border" type="text">
둥근 테두리
둥근 테두리를 만들려면 w3-round 클래스 중 하나를 사용한다.
예제
<input class="w3-input w3-border w3-round" type="text"> <input class="w3-input w3-border w3-round-large" type="text">
경계 없는 입력
w3-input 클래스에는 기본적으로 아래쪽 테두리가 있다.
경계 없는 입력을 원하면 w3-border-0 클래스를 추가한다.
예제
<form class="w3-container w3-light-grey"> <label>First Name</label> <input class="w3-input w3-border-0" type="text"> <label>Last Name</label> <input class="w3-input w3-border-0" type="text"> </form>
스타일과 색상
좋아하는 스타일과 색상을 자유롭게 사용하세요.
입력 양식
예제
<div class="w3-container w3-teal"> <h2>Input Form</h2> </div> <form class="w3-container"> <label class="w3-text-teal"><b>First Name</b></label> <input class="w3-input w3-border w3-light-grey" type="text"> <label class="w3-text-teal"><b>Last Name</b></label> <input class="w3-input w3-border w3-light-grey" type="text"> <button class="w3-btn w3-blue-grey">Register</button> </form>
호버링 가능한 입력
w3-hover-color 클래스는 마우스를 위에 놓으면 입력 필드에 배경색을 추가한다.
예제
<input class="w3-input w3-hover-green" type="text"> <input class="w3-input w3-border w3-hover-red" type="text"> <input class="w3-input w3-border w3-hover-blue" type="text">
애니메이션 입력
w3-animate-input 클래스는 포커스가 있을 때 입력 필드의 너비를 100%로 변환한다.
예제
<input class="w3-input w3-animate-input" type="text" style="width:30%">
체크박스
예제
<input class="w3-check" type="checkbox" checked="checked"> <label>Milk</label> <input class="w3-check" type="checkbox"> <label>Sugar</label> <input class="w3-check" type="checkbox" disabled> <label>Lemon (Disabled)</label>
라디오 버튼
예제
<input class="w3-radio" type="radio" name="gender" value="male" checked> <label>Male</label> <input class="w3-radio" type="radio" name="gender" value="female"> <label>Female</label> <input class="w3-radio" type="radio" name="gender" value="" disabled> <label>Don't know (Disabled)</label>
옵션 선택
예제
<select class="w3-select" name="option"> <option value="" disabled selected>Choose your option</option> <option value="1">Option 1</option> <option value="2">Option 2</option> <option value="3">Option 3</option> </select>
테두리 선택 메뉴
예제
<select class="w3-select w3-border" name="option">
그리드의 양식 요소
이 예에서는 W3.CSS의 반응형 그리드 시스템을 사용하여 입력이 동일한 줄에 표시되도록 한다. 작은 화면에서는 100% 너비로 가로로 쌓인다.
예제
레이블이 있는 그리드
예제
<div class="w3-row-padding">
<div class="w3-half">
<label>First Name</label>
<input class="w3-input w3-border" type="text" placeholder="Two">
</div>
<div class="w3-half">
<label>Last Name</label>
<input class="w3-input w3-border" type="text" placeholder="Three">
</div>
</div>
아이콘 라벨
참고
W3C School - W3.CSS Input
공부 목적 블로그