2019 년 이며이 문제에 대한 이전 답변은 사용하지 않습니다
- CSS 그리드
- CSS 변수
- HTML5 양식 요소
- CSS의 SVG
CSS 그리드는 추가 div, 범위, 별표가있는 범위 및 기타 유물없이 입력보다 레이블을 입력 할 수 있으므로 2019 년에 양식을 작성하는 방법입니다.
최소한의 CSS를 사용하는 곳은 다음과 같습니다.
![스크린 샷 예](https://i.stack.imgur.com/n1dcR.png)
위의 HTML :
<form action="https://www.example.com/register/" method="post" id="form-validate" enctype="multipart/form-data">
<p class="form-instructions">Please enter the following information to create your account.</p>
<label for="firstname">First name</label>
<input type="text" id="firstname" name="firstname" value="" title="First name" maxlength="255" required="">
<label for="lastname">Last name</label>
<input type="text" id="lastname" name="lastname" value="" title="Last name" maxlength="255" required="">
<label for="email_address">Email address</label>
<input type="email" autocapitalize="off" autocorrect="off" spellcheck="false" name="email" id="email_address" value="" title="Email address" size="30" required="">
<label for="password">Password</label>
<input type="password" name="password" id="password" title="Password" required="">
<label for="confirmation">Confirm password</label>
<input type="password" name="confirmation" title="Confirm password" id="confirmation" required="">
<input type="checkbox" name="is_subscribed" title="Subscribe to our newsletter" value="1" id="is_subscribed" class="checkbox">
<label for="is_subscribed">Subscribe to the newsletter</label>
<input type="checkbox" name="persistent_remember_me" id="remember_meGCJiRe0GbJ" checked="checked" title="Remember me">
<label for="remember_meGCJiRe0GbJ">Remember me</label>
<p class="required">* Required</p>
<button type="submit" title="Register">Register</button>
</form>
자리 표시 자 텍스트도 추가 할 수 있으므로 적극 권장됩니다. (나는 단지이 중간 형태에 대답하고있다).
CSS 변수의 경우 :
--icon-required: url('data:image/svg+xml,\
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="-10 -6 16 16"> \
<line id="line" y1="-3" y2="3" stroke="%23df0000" stroke-linecap="butt" transform="rotate(15)"></line> \
<line id="line" y1="-3" y2="3" stroke="%23df0000" stroke-linecap="butt" transform="rotate(75)"></line> \
<line id="line" y1="-3" y2="3" stroke="%23df0000" stroke-linecap="butt" transform="rotate(-45)"></line> \
</svg>');
--icon-tick: url('data:image/svg+xml,\
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100" height="100" viewBox="-2 -2 16 16"> \
<path fill="green" stroke-linejoin="round" d="M2 6L1 7l3 4 7-10h-1L4 8z"/> \
</svg>');
양식 요소의 CSS :
input[type=text][required],
input[type=email][required],
input[type=password][required],
input[type=tel][required] {
background-image: var(--icon-required);
background-position-x: right;
background-repeat: no-repeat;
background-size: contain;
}
input:valid {
--icon-required: var(--icon-tick);
}
양식 자체는 CSS 그리드에 있어야합니다.
form {
align-items: center;
display: grid;
grid-gap: var(--form-grid-gap);
grid-template-columns: var(--form-grid-template-columns);
margin: auto;
}
열의 값은 1 / -1 범위로 설정된 양식의 태그 와 같은 것으로 설정 1fr auto
하거나 설정할 수 있습니다 . 미디어 쿼리에서 변수를 변경하여 입력 상자가 모바일에서 또는 데스크톱에서 위와 같이 전체 너비가되도록합니다. CSS 변수 접근 방식을 사용하여 원하는 경우 모바일에서 그리드 간격을 변경할 수도 있습니다.1fr
<p>
상자가 유효하면 별표 대신 녹색 체크 표시가 나타납니다.
CSS의 SVG는 별표의 이미지를 얻기 위해 브라우저가 서버를 왕복하지 않아도되는 방법입니다. 이런 식으로 별표를 미세 조정할 수 있습니다. 여기 예제는 특이한 각도에 있습니다. 위의 SVG 아이콘을 완전히 읽을 수 있으므로 편집 할 수 있습니다. 별표를 중앙 위 또는 아래에 배치하도록 뷰 박스를 수정할 수도 있습니다.