온라인 양식은 웹 사이트 개발에서 가장 까다로운 분야 중 하나이며, 특히 잘못 될 수있는 많은 것들이 있습니다. 사람들이 온라인 콘텐츠에 액세스하는 방식의 변화하는 특성은 사람들이 보통 컴퓨터로만 할 수있는 일을 전화로 할 수 있기 전에 몇 년 전에 개발 된 기술에 영향을 미쳤습니다. 거의 진화를 거치지 않은 기술입니다.
웹 양식 디자인은 독립형 직업이어야합니다. 사이트 디자이너는 풀 타임 전문 웹 양식 디자이너의 서비스에 참여하여 작업에 도움을 주어야합니다. 그러나 이것은 경제적이지 않은 것으로 여겨지므로 대부분의 경우 사이트 디자이너는 사이트에서 사용되는 모든 양식의 디자인을 담당합니다.
그러나 양식을 디자인하는 것은 고도로 전문화된 기술입니다. 사람들이 어떻게 상호작용하는지 이해해야 합니다.format수집하고 제시하는 최선의 방법을 이해하고format이온. 일반적인 웹 디자인이 주로 프레젠테이션을 중심으로 하는 곳format매력적이면서도 실용적인 방식으로 이온과 이미지를 표현하고, 형태 디자인은 우리가 내면의 본질에 주의를 집중할 것을 요구합니다.format그런 다음 의도한 대로 작동하도록 페이지에서 구성하는 가장 좋은 방법을 결정합니다. 미학은 이 경우 덜 중요한 고려 사항이지만 여전히gotten.
이 기사에서는 웹 양식 디자인 기술을 살펴보고 웹 양식을 모양과 기능 측면에서 더 똑똑하게 만드는 방법을 찾을 수 있는지 살펴 보겠습니다.
웹 양식 작성 도구
브라우저 개발자와 W3C가 웹 양식을 작성하기 위해 제공 한 표준 도구는 이상적이지 않으며 CSS를 적용하기 전에 실제로는 끔찍합니다. 이것이 그들이 어떻게 생겼는지입니다 :
또 다른 표준 입력 컨트롤이 있습니다 고르다그러나 공간 절약이 심각한 문제가 아닌 한이를 사용하지 않아야합니다. 나중에 설명 할 것처럼 선택 컨트롤이 수행하는 작업을 처리하는 더 좋은 방법이 있습니다. 텍스트 영역 컨트롤은 문제가 많고 골동품 학자이므로 가능하면 피해야합니다.
이러한 표준 입력 항목 외에도 HTML5 용으로 새로 작성된 특수 입력 항목도 있습니다. 문서를 내부 용으로 엄격하게 준비하고 브라우저 환경을 알고있는 경우를 제외하고 Firefox와 Chrome에서 작동하는 구성 요소 만 사용해야합니다. 구성 요소가 다른 브라우저에서도 작동하는 것이 좋지만 만 다른 브라우저에서 작동합니다. Firefox에 나타나는 HTML5 구성 요소는 다음과 같습니다.
Chrome에서 모양이 약간 다릅니다.
이제 HTML5 입력은 Chrome과 Firefox에서 다르게 모양과 기능이 작동하지만 여전히 작동한다는 점을 알고 있어야합니다. 표준 입력 컨트롤은 Firefox보다 Chrome에서 조금 더 멋지게 보입니다. Chrome에는 북미 날짜 표준이 적용되어 사용자가 좋아하지 않을 수 있습니다. 또한 날짜 버전의 Chrome 버전은 표시하기에 적합하지 않으므로 입력에만 사용해야합니다. 날짜 선택 도구를 추가하는 것이 Chrome의 주요 개선 사항이지만 향후 Firefox 버전에서는이를 확인할 수 있습니다.
Firefox는 오픈 소스이므로 Chrome 기반의 오픈 소스 Chromium 브라우저 소스 코드를 다운로드하고 관련 코드 섹션을 Firefox 소스로 이식하여 Chrome과 동일한 방식으로 개인용 Firefox 버전에서 입력을 렌더링 할 수 있습니다. 코드 (하지만 Firefox를 새 버전으로 업그레이드 할 때마다 그렇게해야합니다).
그러나 중요한 점은 Chrome의 향상된 기능을 사용하더라도 입력 컨트롤의 기본 모양이 작고 매력적이지 않다는 것입니다. 사용 가능한 다른 컨트롤이 몇 가지 있지만 Chrome과 Firefox에서 모두 작동하지 않으므로 일반 인용 사이트에는 사용해서는 안됩니다.
부트 스트랩의 (거의 적절한) 답변
Bootstrap은 스타일을 표준 컨트롤에 적용하여 모양을 어느 정도 향상시킵니다. 그러나 Bootstrap의 모바일 중심 디자인 철학으로 인해 단일 열로 표시되지 않는 양식에 바람직하지 않은 영향을 미치며 기본적으로 전체 입력 열에 걸쳐 짧은 입력 필드가 웃기게 보입니다. 세계는 모바일로 전환되었을 수 있지만 모바일 사용자를 염두에두고 양식은 발명되지 않았습니다.
Bootstrap은 컨테이너의 가로 너비를 채우기 위해 컨트롤을 확장합니다. 즉,이 컨트롤을 원하는지 여부에 관계없이 모든 컨트롤의 너비가 동일합니다 (이 동작을 수동으로 재정의하지 않는 한) 추가 블링으로 일부 컨트롤 유형을 드레싱 할 수 있습니다. Bootstrap의 솔루션은 우아하고 브라우저마다 모양이 다른 컨트롤의 문제를 극복하지만 표준 컨트롤에서만 작동합니다. HTML5 컨트롤은 현재 버전의 Bootstrap에서 구현되지 않으므로 직접 스타일을 지정해야합니다.
부트 스트랩을 사용하면 컨트롤을 결합 할 수도 있습니다. 때로는 이것이 좋고 때로는 좋지 않습니다. 텍스트 입력과 버튼 및 확인란을 결합하면 좋아 보이지만 사용자가 익숙하지 않은 컨트롤과 어떻게 상호 작용해야하는지 혼동 할 수 있습니다.
Bootstrap이 제공하는 것은 내가 가장 좋아하는 양식 작성 장치 중 두 가지입니다. 패널 그리고 잘. 이들은 양식 데이터를 그룹화하여 어떤 데이터가 어떤 다른 데이터와 관련되어 있는지를 시각적으로 표시하고 데이터를 분리하는 데 매우 유용합니다.
스마트 폼 빌딩 101
이제 양식을 보다 스마트한 방식으로 구성할 수 있는 방법에 대해 생각할 준비가 되었습니다. 이렇게 하려면 기본값을 훨씬 능가하는 생각을 해야 합니다. 우리는 알고 있어야합니다 desktop- 양식 컨트롤의 뿌리와 모바일 호환성에 대한 필요성. 그리고 유용성 및 유효성 검사(양식이 데이터 수집에 사용되는 경우)와 같은 사항에 주의해야 합니다.
폼 컨트롤은 입력을 수집하는 데 사용되지만 저장된 데이터를 표시하는 데도 사용되기 때문에 마지막 요점이 좋습니다. 일반 웹 사용자는 웹사이트에 더 많은 관심을 가지고 있습니다(그리고 그래야만 합니다).format당신에게서 이온을 포기하는 것보다format당신에게 이온.
데이터 수집은 쉽습니다. 사람들은 엉망이더라도 당신이 그들 앞에 붙인 것은 무엇이든 채울 것입니다. 그러나 데이터 표시에 관해서는 더 까다 롭습니다. 따라서 여기에서는 데이터를 수집하는 것보다 표시하는 데 더 많은 양식을 사용하는 데 더 초점을 맞출 것입니다. 표시에는 더 많은주의와 "스마트 함"이 필요하기 때문입니다.
1. 양식이 필요합니까?
양식을 작성하기 전에 실제로 양식이 필요한지 확인해야합니다. 데이터가 적절하고 혼란스럽지 않게 표로 표현 될 수있는 경우 일반적으로 표가 더 효율적이고 실용적입니다.
다음과 같은 경우 양식이 필요합니다.
- 사용자로부터 입력을 수집하고 있습니다
- 표시 할 데이터가 많습니다
- 데이터는 명확하게 세분화되어야합니다
- 사용자가 모바일 장치에서 데이터에 액세스하고있을 가능성이 높습니다
위의 항목 중 하나라도 사실이 아닌 경우 양식을 사용할 필요가 없으며 표로 충분합니다. 우리가 모바일 호환성에 직면하는 문제는 테이블이나 형식이 모바일 디스플레이에 실제로 적합하지 않다는 것입니다. 스마트 폰 디자이너는 사용자에게 세로 방향으로 브라우저를 사용할 수있는 옵션을 제공했으며 대부분의 사용자는 사이트 디자이너가 처리해야하는 대부분의 모바일 호환성 문제를 야기하는 방식으로 전화를 들고 싶어합니다.
그럼에도 불구하고 양식은 표보다 모바일 디스플레이에 더 적합합니다. 따라서 모든 데이터를 모바일 디스플레이에서 쉽게 볼 수 있는지 확인해야한다면 양식이 표보다 더 나은 선택입니다.
2. 디자인 desktop 레이아웃
일반적으로 모바일 레이아웃을 먼저 디자인해야하지만 폼에 관해서는 데이터가 그룹화 될 방법을 알아야하기 때문에 최선의 방법은 아닙니다. 모든 필드를 한 번에 볼 수 있습니다. 양식 디자인에 신경 쓸 필요가없는 데이터를 너무 적게 표시하지 않으면 모바일에서 수행 할 수없는 작업입니다.
양식 디자인을 조롱하는 가장 빠른 방법은 InkScape를 사용하는 것입니다. 이 예에서는 HR 레코드를 관리하기 위한 시스템을 구축합니다. 다음은 목업입니다. desktop 원기:
외부 직사각형은 1024 x 768 픽셀 디스플레이의 전체 공간을 나타냅니다. 아무거나 desktop 브라우저에서는 사용자가 전체 화면 모드(드물게 그런 경우임)에 있지 않는 한 많은 픽셀에 액세스할 수 없습니다. 그래서 우리의
디자인은 900 x 600px이며 대부분의 사용 가능한 영역에 맞아야 합니다. desktop 화면.
사용 가능한 영역의 너비가 900px 미만인 경우 2 x 450px 열이 끊어지고 하나의 연속 450px 열로 나타납니다. 이것은 적어도 구글이 모든 사이트를 손목 시계 화면에 맞출 수 있도록 요구할 때까지 모바일 호환성 문제를 해결합니다.
대부분의 디스플레이는 평범한 입력 상자로 구성되어 있으며 지루한 것처럼 보일 수 있지만 실제로는 거의 항상 최선의 방법입니다. 또한 고정 너비 글꼴을 사용하십시오. 이는 양식 디자인에서 균일 성을 유지하는 데 도움이됩니다.
실제로 열은 각각 450px보다 약간 600px 이상이지만 열 너비를 약 450px로 설정하려면 열 크기를 6에서 5로 줄이십시오. 그러나 600px 열은 모바일 화면에 적합해야합니다. 어쨌든 포장없이 세로 모드에서.
이 코드를 사용하여 레이아웃을 테스트합니다.
그리고 우리는 모든 것이 잘 보이고 있음을 알 수 있습니다 (일시적으로 테두리를 추가했기 때문에 표시합니다).
Linux 화면 눈금자 위젯은 분명히 웹 페이지의 일부는 아니지만 열이 작은 디스플레이에서 나 빠지지 않음을 보여줍니다. 서로 다른 공통 화면 너비에서 발생하는 상황을 살펴 보겠습니다.
3. 사용자 정의 입력 크기 및 레이블 위치 생성
사용자 정의 CSS를 추가하지 않고 모든 것을 기본 상태로두면 첫 번째 입력 컨트롤 행을 추가 할 때 발생합니다.
각 입력의 레이블이 입력 왼쪽에 기본으로 설정되어 있고 입력 컨트롤의 사용자 정의 너비를 설정하지 않았기 때문에 이런 일이 발생합니다. CSS로 두 가지 문제를 모두 해결할 수 있습니다.
이제 레이블 요소의 표시 속성을 "block"으로 설정하고 First 및 Last 필드를 "in40w"클래스로, 필드 MI를 "in10w"클래스로 설정하면 모든 것이 훨씬 더 멋지게 보입니다.
보다시피,보기에는 좋지만 레이아웃은 더 이상 정확하지 않습니다. 이제 상자가 쌓입니다. 그래서 우리가 그것을 고치는 방법은 실제로 필요하지 않기 때문에 label 요소를 사용한다는 아이디어를 없애는 것입니다. 우리는 단지 우리를 적용합니다 인40w 과 인10w 수업을 추가하고 왼쪽에서.
일단 적용되면 이전에 본 문제를 다음과 같이 수정합니다.
그러나 이것은 SSN 분야에 충분한 공간을 남기지 않습니다. 왼쪽 열이 예상보다 크기 때문에 실제로이 필드에 필요한 것보다 40 %가 더 많은 공간을 차지하기 때문에 실제로는 인30w중간 필드가 필요한 것보다 큽니다. 인5w. 다음과 같은 일이 발생합니다.
이제 SSN 필드를 추가 할 수있는 공간이 충분 해 입력 양식의 첫 번째 라인을 완성했습니다. 이 모든 세부 사항을 부드럽게 한 후에 나머지 왼쪽 열을 만드는 것은 매우 쉽습니다. 이제 임시 테두리를 제거하고 열에 올바른 배경을 적용 할 수도 있습니다. 다음은 양식의 특수 영역에 도달하기 전에 패널의 상단 절반입니다.
이 단계에서 몇 가지 일이 발생했습니다. 첫 번째는 열의 배경색 (rgb (235,235,246))을 쉽게 설정할 수있는 부분이며 여기에서 볼 수는 없지만 모든 입력의 텍스트 색상은 # 427DB4로 설정되었으며 글꼴 두께는 눈의 피로를 줄이기 위해 굵게 설정했습니다. CSS 텍스트 변환 속성을 사용하여 텍스트를 자동으로 대문자로 변환하여 데이터 입력 속도를 높이고 오류를 줄 이도록 텍스트를 설정했습니다.
컨트롤을 정렬하고 더 많은 생각이 필요한 디스플레이 유형에 알맞은 정렬을 유지하는 것이 더 복잡한 문제입니다. 이미 첫 번째 입력 라인과 레이블에 사용 된 기술을 보았습니다. 이 기술은 입력 사이에 추가 간격이 필요하지 않을 때 작동하지만 공간을 추가해야하는 경우 다른 기술을 사용하는 것이 좋습니다.
이 다른 기술에는 기본 열 내부에 중첩된 열 행을 만드는 것이 포함되며, 이는 컨트롤의 간격을 적절하게 유지하는 데 도움이 됩니다. 열 수와 크기는 각 컨트롤 집합의 요구 사항에 따라 변경됩니다. 모든 것이 있다는 것을 기억하십시오 responsive, 따라서 열의 크기가 조정되면 열 내부의 모든 항목이 변경 사항에 맞게 크기를 조정하려고 시도합니다. 이것은 시각 장애가 있는 사용자에게 희소식입니다. 디스플레이의 배율을 확대할 수 있고 모든 것이 다른 사용자와 마찬가지로 올바르게 정렬되기 때문입니다.
왼쪽 열의 좀 더 복잡한 부분으로 넘어 가면서 모형에 요약 된 원래 개념은 구현하기 어려운 구조를 요구했습니다. 다행히도 표준 확인란을 사용하면 자격 부여 패널의 데이터가 두 배가 될 수 있다는 것을 깨달았으며 레이아웃 복잡성 문제를 훌륭하게 해결했습니다.
특수 섹션 주변의 더 가벼운 패널은 일반 부트스트랩 우물입니다. 종교 데이터를 입력하기 위해서는 미리 정의된 공식 종교("기타" 포함)의 집합 목록에서 선택해야 합니다. 오른쪽 열을 개발하는 것이 훨씬 더 쉬웠고 왼쪽 열의 첫 번째 컨트롤 세트와 동일한 기술을 사용하여 컨트롤을 테이블로 구성했습니다. format, 그러나 테이블을 사용하지 않고.
이 프로젝트가 성공하려면 완벽한 responsive모든 공식 디스플레이 크기에 표시됩니다. 결과가 어떻게 되었는지 봅시다. 먼저 전체 해상도 버전:
우리가 만족할 수 있을 만큼 프로토타입에 가깝습니다. 사실, 그것은 심지어 개선입니다. 이제 봅시다 responsive 페이지의 각 섹션에 있는 레이아웃:
부트스트랩과 HTML5는 양식 개발을 이전보다 더 빠르고 쉽게 만들었지만 많은 개발자들은 양식을 너무 복잡하게 만들어 이러한 진행 상황을 약화시킵니다(특수 HTML5 양식 요소를 사용하는 이유는 프로젝트에 필요하기 때문이 아니라 사용하기 위해 존재하기 때문입니다. ), 그리고 그것을 이용하려는 시도조차 하지 않는 완전히 XNUMX차원적인 형태를 만들어냄으로써 responsive 설계. 약간의 주의와 추가 작업만 거치면 모든 데이터를 화면 크기에 관계없이 더 보기 쉽게 만들 수 있습니다.
가장 작은 화면 크기에서 세로 레이아웃으로 가장 작은 화면 크기에서 약간의 작은 결함이 발생할 수 있습니다 (이 프로젝트의 경우 첫 번째 행의 중간 초기 필드가 이상적인 것보다 약간 작음). 이것이 전화를 제대로 잡지 않기 위해해야하는 절충안이라는 점을 받아들입니다.
올바르게 수행하면 데이터 양식이 다음과 같이 보일 수 있습니다.
이 대신에 :
헤더 이미지 제공
코멘트 0 응답