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-third">
<input class="w3-input w3-border" type="text" placeholder="One">
</div>
<div class="w3-third">
<input
class="w3-input w3-border" type="text" placeholder="Two">
</div>
<div class="w3-third">
<input class="w3-input
w3-border" type="text" placeholder="Three">
</div>
</div>
레이블이 있는 그리드
예시
<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>