wulin.com html 튜토리얼 칼럼으로 돌아가려면 여기를 클릭하십시오.
위 : 마크 업 언어 - 인용문
원본 출처 5 장 양식
상호 작용은 항상 인터넷의 초점이되어 사용자가 정보를 교환하고 서로 의사 소통 할 수 있습니다. 양식을 사용하면 동일한 방식으로 사용자로부터 정보를 구성하고 수집 할 수 있으므로 웹 사이트를 디자인 할 때는 항상 모든 상황에서 사용할 수있는 범주에 속합니다. 예를 들어, 우리는 양식을 표시하는 약 10,000 가지 방법이 있음을 발견했습니다. 글쎄, 아마도 그렇게 많지는 않지만, 우리는 여전히 여러 상황에 대해 생각할 수있어 사용자가 양식 구조를 쉽게 사용할 수 있으며 웹 사이트 소유자의 관리를 용이하게합니다. 양식을 표시하는 방법 : 양식 사용
<양식 action =/path/to/script method = post>
<테이블>
<tr>
<th> 이름 : </th>
<td> <입력 유형 = 텍스트 이름 = 이름 /> < /td>
</tr>
<tr>
<th> 이메일 : </th>
<td> <입력 유형 = 텍스트 이름 = 이메일 /> < /td>
</tr>
<tr>
<th> & nbsp; </th>
<td> <입력 유형 = 제출 값 = 제출 /> < /td>
</tr>
</테이블>
</form>
많은 사람들이 오랫동안 테이블이있는 형태를 표시했습니다. 사용 빈도가 높기 때문에 이러한 방식으로 양식 유형을 보는 데 익숙해졌습니다. 왼쪽 열은 오른쪽으로 정렬 된 텍스트 설명이며 오른쪽 열은 왼쪽 정렬 형식 요소입니다. 간단한 2리스트 형태를 사용하면 사용하기 쉬운 양식 조판을 완료하는 간단한 방법 중 하나입니다.
어떤 사람들은 형식이 필요하지 않다고 생각하고 다른 사람들은 형태가 형태로 간주되어야한다고 생각합니다. 우리는 두 가지 진술을 뒷받침 할 의도가 없지만 경우에 따라 양식을 사용할 때 특정 양식 레이아웃을 달성하는 가장 좋은 방법, 특히 다양한 요소 (라디오 박스, 드롭 다운 상자 등을 사용하는 양식)를 가진 복잡한 형태를 달성하는 가장 좋은 방법입니다. 이러한 형태를 처리하기 위해 CSS에 전적으로 의존하는 것은 실망 스러울 수 있으며 종종 테이블보다 더 많은 태그를 소비하려면 추가 <Span> 및 <div>가 필요합니다.
다음으로 그림 5-1을보십시오. 이것은 일반적인 시각적 브라우저 디스플레이 방법 A의 효과입니다.
그림 5-1 : 브라우저에 표시된 방법 A의 효과
테이블을 사용하면 텍스트 요소를 매우 깔끔하게 배열 할 수 있습니다. 그러나 이러한 간단한 형태의 경우 테이블을 사용하지 않고 많은 레이블이 필요하지 않은 다른 방법을 사용할 수 있습니다. 양식의 시각적 설계에 그러한 조판이 필요하지 않으면 양식이 필요 하지 않을 수 있습니다. 동시에, 우리는 또한 몇 가지 사용 편의성을 고려해야합니다. 다음 두 가지 방법을 연구 할 때이 부분과 접촉 할 것입니다.
<양식 action =/path/to/script method = post>
<p>
이름 : <입력 유형 = 텍스트 이름 = 이름 /> <br />
이메일 : <입력 유형 = 텍스트 이름 = 이메일 /> <br />
<입력 유형 = 제출 값 = 제출 />
</p>
</form>
단일 단락과 몇 개의 <br /> 태그를 사용하는 것은 모든 요소를 분리하는 실현 가능한 방법이지만 약간의 압박을 시각적으로 묘사 할 수 있습니다. 그림 5-2 브라우저의 11 번째 버전의 디스플레이 효과 :
그림 5-2 : 브라우저 디스플레이 방법 b
테이블을 사용하지 않고 레이아웃을 완료 할 수 있지만 약간 혼잡하고 못 생겼습니다. 동시에, 우리는 또한 요소를 완벽하게 정렬 할 수없는 문제를 만났습니다.
CSS와 함께 <input> 요소에 추가 패치를 추가하여 혼잡 한 느낌을 완화 할 수있었습니다. 이와 같이:
입력{
여백 : 6px 0;
}
이전 단락은 각 <input> 요소 (이름, 이메일 입력 상자 및 제출 버튼 포함)의 상단 및 하단에 6 픽셀의 추가 패치를 추가하고 요소 사이에 추가 공간을 추가합니다. 그림 5-3과 마찬가지로 :
그림 5-3. 입력 요소에 추가 패치를 추가 한 후 방법 B의 영향
방법 B 자체에는 큰 문제가 없지만 양식을 개선하기 위해 미세 조정할 수도 있습니다. 방법 C는 또한 이러한 미세 조정 기술을 사용하므로 살펴 보겠습니다.
<양식 action =/path/to/script id = thisform 메소드 = post>
<p> <label for = name> name : < /label> <br />
<입력 유형 = 텍스트 id = 이름 이름 = 이름 /> < /p>
<p> <label for = email> 이메일 : < /label> <br />
<입력 유형 = 텍스트 ID = 이메일 이름 = 이메일 /> < /p>
<p> <입력 유형 = 제출 값 = 제출 /> < /p>
</form>
메소드 C에 대한 몇 가지 사항이 마음에 듭니다. 먼저,이 예와 비슷한 간단한 형태의 경우 각 설명과 양식 요소를 별도의 단락에 배치하는 것이 더 편리하다는 것을 알았습니다. 스타일 디스플레이를 추가하지 않으면 단락 사이의 사전 설정 거리는 콘텐츠를 쉽게 읽을 수 있도록 충분해야합니다. 나중에 CSS를 사용하여 구간을 양식에 포함 된 <p> 태그로 설정할 수 있습니다.
우리는 심지어 한 걸음 더 나아가 양식에 대한 고유 한 ID = thisform을 설정했습니다. 따라서 지금 방금 언급 한 정확한 간격은 다음과 같이 대략적으로 작성할 수 있습니다.
#Thisform P {
여백 : 6px 0;
}
이는 <p> 태그의 상단, 하단 및 외부 패치를이 양식의 6 픽셀로 설정하여 일반 단락에 대해 브라우저에서 선택한 사전 설정 값을 6 픽셀로 설정하는 것을 의미합니다.
메소드 C와 처음 두 가지 방법의 또 다른 차이점은 각 그룹 (명령 및 입력 상자)이 <p>에 배치되지만 여전히 독립선에 배치한다는 것입니다. <br />를 사용하여 각 요소를 분리하려면 다른 텍스트 길이의 문제를 우회하여 입력 항목을 완벽하게 정렬 할 수 없습니다.
그림 5-4는 <p> 태그에 대한 스타일이 사용 된 일반 브라우저 디스플레이 방법 C의 효과를 보여줍니다.
그림 5-4. P 태그에 CSS를 사용하는 브라우저 디스플레이 방법 C의 영향
방법 C의 시각적 효과 외에도 가장 중요한 장점은 사용 편의성을 향상 시킨다는 것입니다.
<라벨> 태그를 사용하여 양식의 사용 편의성을 향상시키기 위해서는 두 단계가 필요하며 방법 C는이 두 단계를 완료했습니다. 먼저 <라벨>을 사용하여 텍스트 입력 상자 (텍스트 필드), 텍스트 블록 입력 상자 (텍스트 영역), 라디오 박스 (라디오) 등의 관련 양식 요소와 텍스트 설명을 연결하려면 <라벨> 태그를 사용하여 이름 : 제목, 데이터를 입력하는 요소와 연결합니다.
두 번째 단계는 <라벨> 태그에 for 속성을 추가하고 해당 입력 상자의 ID를 채우는 것입니다.
예를 들어, 메소드 C에서 <라벨> 태그를 사용하여 이름을 랩하고 입력 상자 ID와 동일한 값으로 특성을 채우십시오.
<양식 action =/path/to/script id = thisform 메소드 = post>
<p> <label for = name> name : < /label> <br />
<입력 유형 = 텍스트 id = 이름 이름 = 이름 /> < /p>
<p> <label for = email> 이메일 : < /label> <br />
<입력 유형 = 텍스트 ID = 이메일 이름 = 이메일 /> < /p>
<p> <입력 유형 = 제출 값 = 제출 /> < /p>
</form>
어쩌면 다른 사람들이 <라벨> 태그를 양식에 추가해야한다고 말하는 것을 들었을 것입니다. 가장 중요한 질문은 <라벨> 태그를 사용해야하는 이유 입니다.
스크린 리더가 레이아웃 배열의 영향없이 각 양식 요소에 대한 올바른 레이블을 읽을 수있는 레이블/ID 연관을 설정하는 것이 좋습니다. 동시에 <라벨> 태그는 형태 막대 레이블을 표시하도록 만들어집니다. 이 태그를 사용할 때 각 요소의 의미를 설명하고 형태의 구조를 강화합니다.
단일 선택 및 멀티 체크 박스를 처리 할 때 <라벨> 태그를 사용하면 추가 이점이 있습니다. 이렇게하면 입력 요소에 대한 더 큰 클릭 영역이 생성되어 이동성 불확실성을 가진 사용자가 양식을 작성하는 것이 더 쉬워집니다 (Mark Pilgrim, 접근성으로 다이빙 , http://diveintoaccessibility.org/day_28_labeling_form_elements.html).
예를 들어, 사용자 가이 정보를 기록하도록 선택할 수 있도록 멀티 체크 상자를 양식에 추가하면 다음과 같은 <라벨> 태그를 사용할 수 있습니다.
<양식 action =/path/to/script id = thisform 메소드 = post>
<p> <label for = name> name : < /label> <br />
<입력 유형 = 텍스트 id = 이름 이름 = 이름 /> < /p>
<p> <label for = email> 이메일 : < /label> <br />
<입력 유형 = 텍스트 ID = 이메일 이름 = 이메일 /> < /p>
<p> <입력 유형 = 확인란 ID = 기억력 = 기억 /> <label for = 기억>이 정보를 기억하십니까? </label> </p><p> <입력 유형 = 제출 값 = 제출 /> < /p>
</form>
이러한 방식으로 멀티 체크 박스를 표시하면 두 가지 이점을 얻을 수 있습니다. 스크린 리더는 올바른 설명 텍스트를 읽을 수 있습니다 (이 예와 같이 입력 상자 후 텍스트가 나타날 수 있음). 이제 멀티 체크 박스 자체 외에도 텍스트 부분도 포함되어 있습니다 (대부분의 브라우저가 지원).
그림 5-5는 브라우저 에서이 양식의 디스플레이 효과를 보여줍니다. 우리는 확대 후 멀티 체크 박스 스위칭 범위를 구체적으로 나타냅니다.
그림 5-5. 스위칭 범위에 텍스트가 포함 된 여러 선택 상자
양식과 단락 외에도 정의 목록을 사용하여 양식을 표시하는 다른 방법을 보여 드리고자합니다.
이전 페이지 1 2 3 4 다음 페이지 전체 텍스트 읽기