HTML & CSS 양식에 대한 가이드 (해킹 없음!)-CSS 튜토리얼-php.cn

HTML & CSS 양식에 대한 가이드 (해킹 없음!) 역사적으로, HTML 형태는 매우 까다 롭습니다. 첫째, 적어도 약간의 자바 스크립트가 필요했기 때문에 두 번째로 CSS가 그들을 행동하게 만들 수 없었기 때문에. 그러나 최신 웹의 경우 반드시 사실은 아니므로 HTML 및 CSS 만 사용하여 양식을 표시하는 방법을 배우겠습니다. 키 테이크 아웃

HTML 양식은 JavaScript없이 HTML 및 CSS 만 사용하여 만들 수 있습니다. 양식 구조는

요소를 사용하여 생성되며 데이터는 동작 속성을 사용하여 제출됩니다. Enctype 및 Target과 같은 추가 속성은 데이터 인코딩 유형을 정의하고 출력이 표시되는 위치를 정의하는 데 사용할 수 있습니다. 라벨은 유용성과 접근성에 필수적이며 입력의 내용을 설명합니다. 레이블을 선언하는 세 가지 방법은 인접한 레이블, ARIA 라벨 및 래핑 레이블입니다. 가장 효율적인 방법은 라벨 내에서 입력을 래핑하는 것입니다. 자리 표시자는 입력 필드에서 예상되는 것의 예를 제공하는 데 유용합니다.

버튼, 확인란, 색상, 날짜, 이메일, 파일 등과 같이 선택할 수있는 다양한 입력 유형이 있습니다. 브라우저 기본값으로 인해 스타일링 입력이 어려울 수 있지만 모양 속성을 사용하여이를 무시할 수 있습니다. 입력 유효성 검사는 사용자 입력이 특정 기준을 충족하도록하는 데 중요하며 avireath-HTML 유효성 검사 또는 JavaScript를 사용하여 달성 할 수 있습니다.

기본 구조를 형성하는

요소로 시작하십시오 <.> 여기서 멋진 것은 없습니다. 기본 구조를 덮는 것만으로도.

양식 데이터를 자연스럽게 제출하는 경우 (즉, JavaScript가없는 경우) ACTION 속성을 포함해야합니다. 여기서 값은 양식 데이터를 보내는 URL입니다. 이 방법은 달성하려는 내용에 따라 얻거나 게시해야합니다 (Get과 함께 민감한 데이터를 보내지 마십시오). 또한 전송중인 데이터의 인코딩 유형을 정의하는 덜 사용되지 않은 ENCTYPE 속성도 있습니다. 또한 대상 속성은 반드시 형태에 고유 한 속성 일 필요는 없지만 새 탭에서 출력을 표시하는 데 사용될 수 있습니다. JavaScript 기반 양식에는 이러한 속성이 반드시 필요한 것은 아닙니다

형태는 데이터 값을 기대하는 입력으로 구성되어 있습니다.

펜

를 참조하십시오 sitepoint (@sitepoint) 의 양식 1 Codepen에서.

더 나은 유용성 및 접근성을위한 레이블 포함 모든 입력에는 라벨이 필요합니다. 라벨은 입력의 내용을 설명하는 텍스트 설명 자입니다. 레이블을 선언하는 세 가지 방법이 있지만 그중 하나는 다른 두 가지보다 우수합니다. 지금 이것에 대해 뛰어 들어 봅시다.

인접 레이블 인접한 레이블은 레이블이 설명하는 입력을 명시 적으로 선언해야하기 때문에 가장 많은 코드가 필요합니다. 대부분의 경우, 이것은 코드가 적은 상태에서 동일한 효과를 달성하기 위해 레이블 내부의 입력을 래핑 할 수 있기 때문에 반 직관적입니다. 말하기에, 인접한 방법은 소외된 상황에서 필요할 수 있으므로 다음은 다음과 같습니다.

위의 예에서 볼 수 있듯이

의 입력 속성과 일치해야하며 이것이하는 것은 텍스트 설명자가 속한 입력 장치에 대해 설명하는 것입니다. 입력. 입력 장치는 이것을 사용자에게 전달합니다 (예 : 스크린 리더는 음성을 통해이를 지시합니다). ARIA 라벨 시맨틱 HTML이 더 좋지만 ARIA (액세스 가능한 리치 인터넷 응용 프로그램) 레이블은 부재시 보상 할 수 있습니다. 이 경우 실제 html 이 없을 때 레이블이 어떻게 보일지 모르는 것입니다.

불행히도,이 접근법의 단점은 시각적 레이블의 부족입니다. 그러나 이것은 일부 마크 업 (예 : 제목 및 자리 표시자가있는 단일 입력 양식)에서는 괜찮을 수 있습니다.

(잠시 안에 자리 표시자가 무엇인지 설명하겠습니다.) 랩핑 레이블 라벨 내에서 입력을 랩핑하는 것이 가장 깨끗한 접근법입니다. 또한 CSS의 : Focus-Within 덕분에 우리는 자녀의 입력이 포커스를받는 동안 라벨을 스타일로 만들 수 있지만 나중에 논의 할 것입니다.

자리 표시 자 대 레이블

<span><span><span><form</span>></span>
</span>    ...
<span><span><span></form</span>></span>
</span>

로그인 후 복사

간단한 비교 : 라벨은 입력이 기대하는 것을 명시합니다 자리 표시자는 상기 기대치의 예를 보여줍니다 위의 Aria 예제에서 볼 수 있듯이 시각적 레이블이 없을 때 잃어버린 컨텍스트의 일부를 추가 할 수는 있지만 자리 표시자는 라벨의 대안으로 설계되지 않았습니다. 이상적으로는, 우리는 두 가지를 모두 사용해야합니다

펜

를 참조하십시오 sitepoint (@sitepoint) 의 양식 2 Codepen에서.

입력 유형 선택

<span><span><span><form</span> method<span>="POST"</span> action<span>="/subscribe"</span> enctype<span>="application/x-www-form-urlencoded"</span> target<span>="_blank"</span>></span>
</span>    ...
<span><span><span></form</span>></span>
</span>

로그인 후 복사

자리 표시자는 텍스트 기반 입력에만 적용되지만 실제로는 다음을 포함하는 다양한 입력 유형이 있습니다.

시맨틱 입력 유형은 양식 검증 중에, 특히 기본 검증에 의존 할 때 유용합니다. 이는 곧 살펴볼 것입니다. 먼저, 이러한 입력을 스타일링하는 방법을 배우겠습니다 스타일 입력 코딩 양식의 가장 화려한 측면은 브라우저의 기본 스타일을 무시하는 것입니다. 고맙게도 오늘 외모 : 없음; caniuse.com에 따라 96.06% 브라우저 지원이 있습니다 다음 CSS 코드로 웹 브라우저의 기본 스타일을 재설정 한 후에는 입력을 스타일로 만들 수 있지만 라디오 및 확인란 입력 유형이 모두 포함됩니다.

그러나 이러한 입력 중 일부에는 웹 브라우저에 따라 극복하기가 어렵거나 불가능한 단점이있을 수 있습니다. 이러한 이유로 많은 개발자가 기본 유형 = "text"속성 = 값으로 되돌아가는 경향이 있습니다.이 퀴크가 바람직하지 않다는 것을 알게되면 (예 : 입력 유형 = "숫자"의 "Caret"). 그러나 그러나

는

은 안감… 입력 모드를 지정 Caniuse.com에 따라 82.3% 웹 브라우저 지원을 사용하면 새로운 InputMode 속성은 사용중인 입력 유형에 관계없이 핸드 헬드 장치에서 공개 될 키보드 레이아웃을 지정합니다.

아무것도 아닌 것보다 낫습니다

사용자 입력 검증 JavaScript 솔루션을 통해 Native-HTML 유효성 검사를 선택하면 InputMode가 이와 관련하여 아무것도 달성하지 못한다는 것을 기억하십시오. inputmode = "email"는 <form> ... </form> 가 이메일 주소를 검증하지 않지만 입력 유형 = "이메일"은 표시됩니다. 그게 차이입니다. 이것을 제쳐두고, 유효성 검사를 유발하는 것을 논의 해 봅시다 :

사용자 정의 규칙 만들기 사용자 정의 규칙은 Regexp 객체에서 사용하는대로 JavaScript 정규 표현식에 대한 지식이 필요합니다 (그러나 슬래시 나 따옴표를 감싸지 않으면). 다음은 한 가지 규칙으로 소문자 문자 (a – z) 및 minlength/maxlength를 시행하는 예입니다.

<.> 추가 정보는 여기에 있습니다.

참고 : 프론트 엔드 검증 (기본 -HTML 또는 기타)은 서버 측 유효성 검사를 대신하여 절대로 사용해서는 안됩니다! 스타일링 유효한/유효하지 않은 상태

추가 명확성을 위해, 이것이 우리가 스타일의 유효성을 만드는 방법입니다 :

휴스턴, 우리는 문제가 있습니다!

입력은 즉시 값 (또는 그 부족)을 확인하려고 시도하므로 다음 코드 (입력이 값을 보유하고있는 동안 유효한/유효하지 않은 상태 만 표시)가 더 좋을 수 있습니다.

이것은 유효한/유효하지 않은 스타일을 보여 주지만

자리 표시 자 <form method="POST" action="/subscribe" enctype="application/x-www-form-urlencoded" target="_blank"> ... </form> 가 표시되지 않은 경우에만 (사용자가 무언가를 입력했기 때문에) .