구체화-양식
Materialise는 양식 디자인을위한 매우 아름답고 반응이 빠른 CSS를 가지고 있습니다. 다음 CSS가 사용됩니다-
| Sr. 아니. | 클래스 이름 및 설명 |
|---|---|
| 1 | input-field div 컨테이너를 입력 필드 컨테이너로 설정합니다. 필수입니다. |
| 2 | validate 입력 필드에 유효성 검사 스타일을 추가합니다. |
| 삼 | active 활성 스타일로 입력을 표시합니다. |
| 4 | materialize-textarea 텍스트 영역의 스타일을 지정하는 데 사용됩니다. 텍스트 영역은 내부 텍스트에 맞게 자동으로 크기가 조정됩니다. |
| 5 | filled-in 채워진 상자 스타일로 확인란을 표시합니다. |
예
다음 예제는 샘플 양식을 보여주기 위해 입력 클래스를 사용하는 방법을 보여줍니다.
materialize_forms.htm
<html>
<head>
<title>The Materialize Form Example</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
<script type = "text/javascript"
src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
</script>
</head>
<body class = "container">
<div class = "row">
<form class = "col s12">
<div class = "row">
<div class = "input-field col s6">
<i class = "material-icons prefix">account_circle</i>
<input placeholder = "Username" value = "Mahesh" id = "name"
type = "text" class = "active validate" required />
<label for = "name">Username</label>
</div>
<div class = "input-field col s6">
<label for = "password">Password</label>
<input id = "password" type = "password" placeholder = "Password"
class = "validate" required />
</div>
</div>
<div class = "row">
<div class = "input-field col s12">
<input placeholder = "Email" id = "email" type = "email"
class = "validate">
<label for = "email">Email</label>
</div>
</div>
<div class = "row">
<div class = "input-field col s12">
<i class = "material-icons prefix">mode_edit</i>
<textarea id = "address" class = "materialize-textarea"></textarea>
<label for = "address">Address</label>
</div>
</div>
<div class = "row">
<div class = "input-field col s12">
<input placeholder = "Comments (Disabled)" id = "comments"
type = "text" disabled />
<label for = "comments">Comments</label>
</div>
</div>
<div class = "row">
<div class = "input-field col s12">
<p>
<input id = "married" type = "checkbox" checked = "checked" />
<label for = "married">Married</label>
</p>
<p>
<input id = "single" type = "checkbox" class = "filled-in" />
<label for = "single">Single</label>
</p>
<p>
<input id = "dontknow" type = "checkbox" disabled = "disabled" />
<label for = "dontknow">Don't know (Disabled)</label>
</p>
</div>
</div>
<div class = "row">
<div class = "input-field col s12">
<p>
<input id = "male" type = "radio" name = "gender"
value = "male" checked />
<label for = "male">Male</label>
</p>
<p>
<input id = "female" type = "radio" name = "gender"
value = "female" checked />
<label for = "female">Female</label>
</p>
<p>
<input id = "dontknow1" type = "radio" name = "gender"
value = "female" disabled />
<label for = "dontknow1">Don't know (Disabled)</label>
</p>
</div>
</div>
</form>
</div>
</body>
</html>결과
결과를 확인하십시오.
중요한 입력 컨트롤
Materialise는 다양한 유형의 입력 컨트롤을위한 CSS를 제공합니다. 다음 표는 동일합니다.
| Sr. 아니. | 입력 유형 이름 및 설명 |
|---|---|
| 1 | 고르다 다양한 유형의 선택 입력 |
| 2 | 스위치 다양한 유형의 스위치 |
| 삼 | 파일 다양한 유형의 파일 입력 |
| 4 | 범위 다양한 유형의 범위 입력 |
| 5 | 날짜 선택기 날짜 선택기 |
| 6 | 캐릭터 카운터 캐릭터 카운터 |