입력 양식
상위 레이블
입력 양식
예
<form class="w3-container">
<label>First Name</label>
<input class="w3-input" type="text">
<label>Last Namel</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
class="w3-label">First Name</label>
<input class="w3-input"
type="text">
<label
class="w3-label">Last Name</label>
<input class="w3-input"
type="text">
</form>
</div> »그에게 자신을보십시오 그린 라벨
클래스 = "W3 레이블"레이블은 기본적으로 녹색 :
예
<form class="w3-container">
<label
class="w3-label">First Name</label>
<input class="w3-input"
type="text">
<label
class="w3-label">Last Name</label>
<input class="w3-input"
type="text">
</form> »그에게 자신을보십시오 레이블 검증
검증 라벨은 빨간색, 입력이 유효가되면 녹색으로 바뀝니다.
검증 라벨을 만들하려면 W3 레이블 클래스에 W3 - 유효성 검사 클래스를 추가 할 수 있습니다.
예
<form class="w3-container">
<input
class="w3-input" type="text" required>
<label class="w3-label
w3-validate">First Name</label>
<input class="w3-input" type="text" required>
<label class="w3-label
w3-validate">Last Name</label>
<input class="w3-input" type="email" required>
<label class="w3-label
w3-validate">Email</label>
</form> »그에게 자신을보십시오 컬러 라벨
라벨을 색으로 W3 텍스트 색상 클래스 중 하나를 사용 :
예
<form class="w3-container">
<label
class="w3-label w3-text-blue"><b>First Name</b></label>
<input class="w3-input w3-border" type="text">
<label
class="w3-label 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 국경 클래스를 추가합니다 :
둥근 테두리
둥근 테두리를 만들 수 W3 라운드 클래스 중 하나를 사용 :
예
<input class="w3-input w3-border w3-round"
type="text">
<input class="w3-input w3-border
w3-round-large"
type="text"> »그에게 자신을보십시오 경계선 입력
W3 입력 클래스는 기본적으로 아래쪽 테두리가 있습니다. 경계선 입력을하려면 W3 국경-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-label w3-text-teal"><b>First Name</b></label>
<input class="w3-input w3-border w3-light-grey" type="text">
<label class="w3-label
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> »그에게 자신을보십시오 Hoverable 입력
W3-hover- 컬러 클래스 위에 마우스의 입력 필드에 대한 배경 컬러를 추가
예
<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-애니메이션 입력 클래스 100 % 입력 필드의 폭을 변형 :
예
<input class="w3-check" type="checkbox" checked="checked">
<label class="w3-validate">Milk</label>
<input class="w3-check"
type="checkbox">
<label class="w3-validate">Sugar</label>
<input class="w3-check" type="checkbox" disabled>
<label class="w3-validate">Lemon (Disabled)</label> »그에게 자신을보십시오 예
<input class="w3-radio" type="radio" name="gender" value="male" checked>
<label class="w3-validate">Male</label>
<input class="w3-radio"
type="radio" name="gender" value="female">
<label class="w3-validate">Female</label>
<input class="w3-radio"
type="radio" name="gender" value="" disabled>
<label class="w3-validate">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> »그에게 자신을보십시오 경계 선택 메뉴
그리드에서 양식 요소
이 예에서, 우리는 입력이 같은 줄에 표시 할 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> »그에게 자신을보십시오