첫 번째 블록 영역은 섹션 태그에 래핑되므로 레이아웃을 나란히 배치 할 수 있습니다. 왼쪽 열에는 텍스트, 전자 메일, URL 및 전화 번호와 같은 모든 입력이 포함됩니다. 휴대 전화에서 탭으로 이동할 때 모바일 키보드 디스플레이는 입력 유형에 따라 조정해야합니다. 이동 중에도 이러한 기능을 지원해야 할 이유가 많이 있습니다. 요즘 이동 중에도 작업하고 있기 때문입니다..
textarea 요소는 pageload에 정의 된 자리 표시 자 텍스트를 가질 수도 있습니다. 이것은 사용자가 필드에 텍스트를 입력하면 사라지는 레이블과 유사합니다. 이월되지 않는 속성은 다음과 같습니다. 자동 완성 텍스트 영역은 일반적으로 관련 콘텐츠를 채우지 않기 때문에.
사이드 바 컨트롤 이 양식을 작성하여 크기 조정 창 표시에 적절히 응답하도록했습니다. 창이 충분히 가득 차면 두 입력 열이 서로 옆에 떠 있습니다. 그러나 너비가 약간 줄이면 오른쪽 사이드 바가 주 콘텐츠 아래로 떨어집니다.
다음은 사이드 바 영역을위한 HTML입니다.
수신자 : 사이트 스탭 편집장 기술부 섭외 일반 지원 이 코드는 실제로 혼란스럽지 않습니다. 간단한 옵션 선택 메뉴와 일부 라디오 버튼. 또한이 객체들 후에 섹션의 끝 부분으로 리셋 버튼과 제출 버튼을 배치했습니다..
이 모든 것이 잘 보이기 때문에 CSS 속성을 살펴 보겠습니다. 양식 요소를 작업 할 때 적용 할 수있는 사용자 정의가 너무 많습니다. 너는 너무 많은 생각으로 놀림을 피하고 재미있게 놀아 라.!
애니메이션 상자 그림자 당신은 각각의 주요 입력 요소를 통해 탭을 할 때마다 다채로운 외곽 섀도우를 움직였습니다. Google 크롬에는 유사한 기능을하는 외곽 성 속성이 있지만 화려하지는 않습니다. 인터페이스의이 작은 부분은 최초 방문자에게 매력적입니다..
/ ** 양식 요소 ** / # hongkiat-form 상자 크기 : border-box; # hongkiat-form .txtinput display : block; font-family : "Helvetica Neue", Arial, sans-serif; border-style : 솔리드; border-width : 1px; border-color : #dedede; margin-bottom : 20px; 글꼴 크기 : 1.55em; 패딩 : 11px 25px; 패딩 왼쪽 : 55px; 너비 : 90 %; color : # 777; 상자 그림자 : 0 1px 3px rgba (0, 0, 0, 0.1) 삽입; -moz-box-shadow : 0 1px 3px rgba (0, 0, 0, 0.1) 삽입; -webkit-box-shadow : 0 1px 3px rgba (0, 0, 0, 0.1) 삽입; 전환 : 경계 0.15s 선형 0s, 상자 그림자 0.15s 선형 0s, 색상 0.15s 선형 0s; -webkit-transition : 테두리 0.15s 선형 0s, 상자 그림자 0.15s 선형 0s, 색상 0.15s 선형 0s; -moz-transition : 경계 0.15s 선형 0s, 상자 그림자 0.15s 선형 0s, 색상 0.15s 선형 0s; -o- 전환 : 경계 0.15s 선형 0s, 상자 그림자 0.15s 선형 0s, 색상 0.15s 선형 0s; # hongkiat-form .txtinput : focus color : # 333; 경계 색 : rgba (41, 92, 161, 0.4); box-shadow : 0 1px 3px rgba (0, 0, 0, 0.1) 삽입, 0 0 8px rgba (41, 92, 161, 0.6); -moz-box-shadow : 0 1px 3px rgba (0, 0, 0, 0.1) 삽입, 0 0 8px rgba (41, 92, 161, 0.6); -webkit-box-shadow : 0 1px 3px rgba (0, 0, 0, 0.1) 삽입, 0 0 8px rgba (41, 92, 161, 0.6); 개요 : 0 없음; 각 텍스트 요소를 대상으로하기 위해 클래스를 사용했습니다. .txtinput. 각 전환 속성은 테두리, 상자 그림자 및 색상에서 작동합니다. 나는 사용하고있다. 박스 크기 : border-box; 폼 컨테이너에서 패딩이 우리의 응답 성있는 디자인을 엉망으로 만들지 않습니다..
나는이 같은 스타일을 복사하여 텍스트 영역을 위해 약간 편집해야했습니다. 패딩과 여백 중 일부를 변경하고 고유 한 배경 아이콘을 추가했습니다..
# hongkiat-form textarea 디스플레이 : 블록; font-family : "Helvetica Neue", Arial, sans-serif; border-style : 솔리드; border-width : 1px; border-color : #dedede; margin-bottom : 15px; 글꼴 크기 : 1.5em; 패딩 : 11px 25px; 패딩 왼쪽 : 55px; 너비 : 90 %; 높이 : 180px; color : # 777; 상자 그림자 : 0 1px 3px rgba (0, 0, 0, 0.1) 삽입; -moz-box-shadow : 0 1px 3px rgba (0, 0, 0, 0.1) 삽입; -webkit-box-shadow : 0 1px 3px rgba (0, 0, 0, 0.1) 삽입; 전환 : 경계 0.15s 선형 0s, 상자 그림자 0.15s 선형 0s, 색상 0.15s 선형 0s; -webkit-transition : 테두리 0.15s 선형 0s, 상자 그림자 0.15s 선형 0s, 색상 0.15s 선형 0s; -moz-transition : 경계 0.15s 선형 0s, 상자 그림자 0.15s 선형 0s, 색상 0.15s 선형 0s; -o- 전환 : 경계 0.15s 선형 0s, 상자 그림자 0.15s 선형 0s, 색상 0.15s 선형 0s; #hongkiat-form textarea : focus color : # 333; 경계 색 : rgba (41, 92, 161, 0.4); 상자 그림자 : 0 1px 3px rgba (0, 0, 0, 0.1) 삽입, 0 0 8px rgba (40, 90, 160, 0.6); -moz-box-shadow : 0 1px 3px rgba (0, 0, 0, 0.1) 삽입, 0 0 8px rgba (40, 90, 160, 0.6); -webkit-box-shadow : 0 1px 3px rgba (0, 0, 0, 0.1) 삽입, 0 0 8px rgba (40, 90, 160, 0.6); 개요 : 0 없음; # hongkiat-form textarea.txtblock background : #fff url ( 'https://assets.hongkiat.com/uploads/responsive-css3-form/speech.png') 5px 4px no-repeat; 사이드 바 입력 라디오 버튼과 선택 메뉴 항목의 스타일은 훨씬 간단합니다. 이러한 요소에 외부 광선 효과 및 유사한 그림자를 적용 할 수 있지만 항상 좋은 것은 아닙니다. 또는 디자이너가 사용자 지정 사용자 인터페이스를 만들고이를 배경 이미지로 첨부합니다. 그러나이 옵션을 제대로 표시하려면 jQuery 해결 방법이 필요할 수 있습니다..
span.radiobadge display : block; margin-bottom : 8px; span.radiobadge label font-size : 1.2em; 패딩 - 하단 : 4px; select.selmenu font-size : 17px; color : # 676767; 패딩 : 9px! 중요; 국경 : 1 픽셀 단색 #aaa; 너비 : 200px; 나는 이것을 주요 입력 요소로부터 멀리 밀어 내기 위해 많은 노력을 기울이지 않았다. 여분의 여백은 사용자가 양식과 상호 작용할 때 편안함을 느끼는 데 중요합니다. 텍스트가 초소형 인 경우 각 부분을 채우는 데 어려움이있을 수 있습니다. 글꼴을 크게 유지하고 너무 커서 페이지를 압도하지 않습니다..
사용자 정의 된 버튼 리셋 버튼과 제출 버튼은 자체 클래스로 설계되었습니다. 양식 필드의 파란색 하이라이트와 잘 어울리는 밝은 그라데이션 세트를 만들었습니다..
다음은 표준 및 마우스 오버 상태의 제출 버튼에 대한 내 CSS 코드입니다..
#buttons #submitbtn display : block; 왼쪽으로 뜨다; 높이 : 3em; 패딩 : 0 1em; 국경 : 1px 고체; 윤곽선 : 0; font-weight : bold; 글꼴 크기 : 1.3em; color : #fff; 텍스트 그림자 : 0px 1px 0px # 222; white-space : nowrap; 단어 감싸기 : 보통; 세로 정렬 : 중간; 커서 : 포인터; -moz-border-radius : 2px; -webkit-border-radius : 2px; border-radius : 2px; border-color : # 5e890a # 5e890a # 000; -moz-box-shadow : 인세 트 0 1px 0 rgba (256,256,256, .35); -ms-box-shadow : 인세 트 0 1px 0 rgba (256,256,256, .35); -webkit-box-shadow : 인세 트 0 1px 0 rgba (256,256,256, .35); 상자 그림자 : 인세 트 0 1px 0 rgba (256,256,256, .35); 배경색 : rgb (226,238,175); 배경 이미지 : -moz-linear-gradient (top, rgb (226,238,175) 3 %, rgb (188,216,77) 3 %, rgb (144,176,38) 100 %); background-image : -webkit-gradient (선형, 왼쪽 위, 왼쪽 아래, 색 중지 (3 %, rgb (226,238,175)), 컬러 스톱 (3 %, rgb (188,216,77)), 컬러 스톱 (100 %, rgb (144,176,38))); background-image : -webkit-linear-gradient (top, rgb (226,238,175) 3 %, rgb (188,216,77) 3 %, rgb (144,176,38) 100 %); 배경 이미지 : -o 선형 그라디언트 (상단, rgb (226,238,175) 3 %, rgb (188,216,77) 3 %, rgb (144,176,38) 100 %); 배경 이미지 : -ms-linear-gradient (top, rgb (226,238,175) 3 %, rgb (188,216,77) 3 %, rgb (144,176,38) 100 %); 배경 이미지 : 선형 그라디언트 (상단, rgb (226,238,175) 3 %, rgb (188,216,77) 3 %, rgb (144,176,38) 100 %); 필터 : progid : DXImageTransform.Microsoft.gradient (startColorstr = "# e2eeaf", endColorstr = "# 90b026", GradientType = 0); #buttons #submitbtn : 마우스 오버, #buttons #submitbtn : 활성 border-color : # 7c9826 # 7c9826 # 000; color : #fff; -moz-box-shadow : 인세 트 0 1px 0 rgba (256,256,256,0.4), 0 1px 3px rgba (0,0,0,0.5); -ms-box-shadow : 인세 트 0 1px 0 rgba (256,256,256,0.4), 0 1px 3px rgba (0,0,0,0.5); -webkit-box-shadow : 인세 트 0 1px 0 rgba (256,256,256,0.4), 0 1px 3px rgba (0,0,0,0.5); 상자 그림자 : 인세 트 0 1px 0 rgba (256,256,256,0.4), 0 1px 3px rgba (0,0,0,0.5); 배경 : rgb (228,237,189); 배경 : -moz-linear-gradient (top, rgb (228,237,189) 2 %, rgb (207,219,120) 3 %, rgb (149,175,54) 100 %); 배경 : -webkit-gradient (선형, 왼쪽 위, 왼쪽 아래, 컬러 스톱 (2 %, rgb (228,237,189)), 컬러 스톱 (3 %, rgb (207,219,120)), 컬러 스톱 (100 %, rgb 149,175,54)))); background : -webkit-linear-gradient (top, rgb (228,237,189) 2 %, rgb (207,219,120) 3 %, rgb (149,175,54) 100 %); 배경 : -o 선형 그라디언트 (상단, rgb (228,237,189) 2 %, rgb (207,219,120) 3 %, rgb (149,175,54) 100 %); 배경 : -ms-linear-gradient (top, rgb (228,237,189) 2 %, rgb (207,219,120) 3 %, rgb (149,175,54) 100 %); 배경 : 선형 그라데이션 (상단, rgb (228,237,189) 2 %, rgb (207,219,120) 3 %, rgb (149,175,54) 100 %); 필터 : progid : DXImageTransform.Microsoft.gradient (startColorstr = "# e4edbd", endColorstr = "# 95af36", GradientType = 0); 이 유형의 선택기를 깨끗하게 유지하는 것은 거의 불가능합니다! 이전의 많은 레거시 브라우저를 나열하고 지원해야하는 속성이 너무 많습니다. Internet Explorer는 적절한 필터로 이러한 그라디언트를 렌더링 할 수도 있습니다. 배경 그라디언트를 제외하고 나는 새 테두리 색상, 둥근 모서리 및 마우스를 올려 놓는 상자 그림자도 포함 시켰습니다..
재설정 버튼은 비슷하지만 색상 체계와 완전히 다른 경로를 따라갔습니다. 밝은 회색은 밝은 녹색 색상과 비교하여 배경에 떨어지는 경향이 있습니다. 리셋 버튼은별로 사용되지 않으므로 모든주의가 필요하지 않습니다..
#buttons #resetbtn display : block; 왼쪽으로 뜨다; color : # 515151; 텍스트 그림자 : -1px 1px 0px #fff; margin-right : 20px; 높이 : 3em; 패딩 : 0 1em; 윤곽선 : 0; font-weight : bold; 글꼴 크기 : 1.3em; white-space : nowrap; 단어 감싸기 : 보통; 세로 정렬 : 중간; 커서 : 포인터; -moz-border-radius : 2px; -webkit-border-radius : 2px; border-radius : 2px; 배경색 : #fff; 배경 이미지 : -moz-linear-gradient (top, rgb (255,255,255) 2 %, rgb (240,240,240) 2 %, rgb (222,222,222) 100 %); color-stop (2 %, rgb (240,240,240)), color-stop (100 %, rgb (255,255,255) rgb (222,222,222))); background-image : -webkit-linear-gradient (top, rgb (255,255,255) 2 %, rgb (240,240,240) 2 %, rgb (222,222,222) 100 %); 배경 이미지 : -o-linear-gradient (top, rgb (255,255,255) 2 %, rgb (240,240,240) 2 %, rgb (222,222,222) 100 %); 배경 이미지 : -ms-linear-gradient (top, rgb (255,255,255) 2 %, rgb (240,240,240) 2 %, rgb (222,222,222) 100 %); 배경 이미지 : 선형 그래디언트 (위쪽, rgb (255,255,255) 2 %, rgb (240,240,240) 2 %, rgb (222,222,222) 100 %); 필터 : progid : DXImageTransform.Microsoft.gradient (startColorstr = "# ffffff", endColorstr = "# dedede", GradientType = 0); 국경 : 1px 고체 # 969696; box-shadow : 0 1px 2px rgba (144, 144, 144, 0.4); -moz-box-shadow : 0 1px 2px rgba (144, 144, 144, 0.4); -webkit-box-shadow : 0 1px 2px rgba (144, 144, 144, 0.4); 텍스트 그림자 : 0 1px 1px rgba (255, 255, 255, 0.75); #buttons #resetbtn : hover text-shadow : 0 1px 1px rgba (255, 255, 255, 0.75); color : # 818181; 배경색 : #fff; 배경 이미지 : -moz-linear-gradient (top, rgb (255,255,255) 2 %, rgb (244,244,244) 2 %, rgb (229,229,229) 100 %); color-stop (2 %, rgb (244,244,244)), color-stop (100 %, rgb (255,255,255) rgb (229,229,229))); background-image : -o-linear-gradient (맨 위, rgb (255,255,255) 2 %, rgb (244,244,244) 2 %, rgb (229,229,229) 100 % 255,255,255) 2 %, rgb (244,244,244) 2 %, rgb (229,229,229) 100 %); 배경 이미지 : -ms-linear-gradient (top, rgb (255,255,255) 2 %, rgb (244,244,244) 2 %, rgb (229,229,229) 100 %); 배경 이미지 : 선형 그래디언트 (위쪽, rgb (255,255,255) 2 %, rgb (244,244,244) 2 %, rgb (229,229,229) 100 %); 필터 : progid : DXImageTransform.Microsoft.gradient (startColorstr = "# ffffff", endColorstr = "# e5e5e5", GradientType = 0); border-color : #aeaeae; 상자 그림자 : 인세 트 0 1px 0 rgba (256,256,256,0.4), 0 1px 3px rgba (0,0,0,0.5); 리셋 유형을 삭제하고이 흰색 / 회색 색상 체계를 기본 제출 버튼으로 사용할 수도 있습니다. 필자는 같은 그라데이션 스타일과 그림자 효과를 많이 사용했으며 내부 라벨의 텍스트 그림자도 사용했습니다. 그것은 확실히 사용자 경험에 다른 감각을 제공합니다..
반응적인 레이아웃 변경 다른 CSS 파일로 이동하면서 설치 한 간단한 반응 형 미디어 쿼리를 살펴볼 수 있습니다. 800px를 초과하는 브라우저 창은 전체 사이드 바 인터페이스를 경험합니다. 이 임계 값보다 낮 으면 왼쪽 열이 100 % 너비로 확장되고 세로 막대 요소가 아래로 떨어집니다.
@media 화면 및 (최대 너비 : 800px) body padding : 10px 15px; #container width : 100 %; # hongkiat-form #aligned width : 100 %; float : none; 디스플레이 : 블록; # hongkiat-form #aside 너비 : 100 %; 디스플레이 : 블록; float : none; # hongkiat-form .txtinput, # hongkiat-form textarea (너비 : 85 %; #prioritycase float : left; 디스플레이 : 블록; #recipientcase float : left; 디스플레이 : 블록; margin-right : 55px; 크기가 점점 가까워지면서 각 입력 양식을 적용하려고합니다. width 속성은 웹 페이지 자체보다 더 오래 끝날 수 있습니다. 그런 다음 가장자리 위에 튀어 나온 입력 양식이 있습니다. 이것은 550px 주위에 발생합니다.이 위치는 다음 검색어를 깨고, 세로 및 가로 방향의 iPhone 화면 디스플레이 해상도와 함께 발생합니다..
/ * 작은 화면 드롭 오프 ******* / @ 미디어 전용 화면 및 (최대 너비 : 550px) # hongkiat-form .txtinput, # hongkiat-form textarea (너비 : 80 %; / * iPhone Landscape ******** / @media 전용 화면 및 (최대 너비 : 480px) body padding : 10px 0px; select.selmenu width : 190px; / * iPhone 세로 ******* / @ 미디어 전용 화면 및 (최대 너비 : 320px) body padding : 10px 0px; # hongkiat-form .txtinput, # hongkiat-form textarea (너비 : 70 %; # hongkiat-form #aligned 오버플로 : 숨김; select.selmenu width : 160px; #recipientcase margin-right : 30px; 가로 가로 모드는 여전히 모든 것을 잘 묶어 놓습니다. 라디오 버튼을위한 공간을 만들기 위해 드롭 다운 선택 메뉴를 약간 더 얇게 만들었습니다. 세로보기에서는 모든 요소의 너비를 훨씬 더 작게 조정했습니다. 이제 크기가 조정 된 브라우저 창에서도 코드가 중단되지 않습니다. 하지만 iOS / Android 스마트 폰도 지원하는 것이 좋습니다..
결론 이 튜토리얼이 웹 폼에서 얼마나 많은 일을 할 수 있는지를 설명하는 데 도움이 되었기를 바랍니다. 새로운 CSS3 속성은 몇 줄의 코드만으로 완벽하게 작동하는 애니메이션을 만들 정도로 강력합니다. 웹 개발에서 일하고 이러한 추세를 따르는 것이 진정으로 흥미로운시기입니다..
튜토리얼 코드에 대한 아이디어 나 제안이 있으시면 아래 의견란을 통해 자유롭게 공유하십시오..
