웹 프론트엔드 H5 튜토리얼 HTML5 실용적인 PHP 웹 페이지 양식 Design_html5 튜토리얼 기술

HTML5 실용적인 PHP 웹 페이지 양식 Design_html5 튜토리얼 기술

May 16, 2016 pm 03:51 PM
형태 디자인

HTML5는 페이지 구조, 멀티미디어 처리 등 여러 측면에서 이전 HTML과 매우 다릅니다. 이 튜토리얼에서는 HTML5, CSS3 및 PHP를 사용하여 HTML5 표준을 준수하는 간단한 양식 제출 웹페이지를 실제로 디자인하도록 안내합니다. 독자는 새로운 HTML5 양식 페이지의 기본 요소를 배울 수 있습니다. 이 글의 독자는 HTML, CSS, PHP에 대한 지식이 있는 사람들입니다.

 형태의 디자인 스케치

이번 글은 포토샵 만드는 법을 가르치는 것이 아니기 때문에 그냥 폼의 스케치를 디자인한 뒤 HTML5, CSS3, PHP를 이용해 구현해 보겠습니다. 우리가 디자인하고 싶은 폼의 스케치는 아래와 같습니다. 🎜>


보시다시피, 이 디자인 스케치에서 우리가 기대하는 효과는 사용자가 이름을 입력하면 NAME 필드의 텍스트 상자가 포커스 형태로 표시되고 자세히 보면 이메일 입력 상자는 모서리 테두리 입력 상자에 있고, 메시지 텍스트 영역 입력 상자에는 배경 베이스맵이 표시됩니다. 제출 버튼은 사용자 정의 버튼입니다.

디자인 시작하기

다음으로 양식 디자인을 시작합니다. 이 기사에서는 PHP를 사용하므로 PHP 프로그래밍 도구를 사용하여 먼저 index.php 파일을 만든 다음 HTML5 표준을 준수하는 양식 작성을 시작할 수 있습니다.

 1) DOCTYPE 소개

HTML5에서는 DOCTYPE 선언이 매우 간단해지며 코드는 다음과 같습니다.



코드 복사 코드는 다음과 같습니다.



문의 양식<br></head> <br></body> 🎜> </html> <br><br><br>보셨나요? HTML5에서는 이제 페이지 상단의 유형 선언에 <br> 이전 HTML4와 비교하면 됩니다. , 비교가 필요합니다. 다음과 같이 선언하십시오. <br> </div> <br><br><br><br>코드 복사<div class="msgheader"><div class="right"> <span style="CURSOR: pointer" onclick="copycode(getid('phpcode31'));">코드는 다음과 같습니다.<u> </u> </span>< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >. </div></div> <div class="msgborder" id="phpcode31">다음으로 페이지 양식의 구조를 디자인하기 시작합니다. 먼저 아래와 같이 양식의 구조를 살펴보겠습니다. <br><br> </div> 보시다시피 Header 영역과 Main Body로 나누어져 있습니다. 폼의 주요 영역이고 Footer 영역은 폼의 하단 영역입니다. HTML5에서는 다음 코드에서 볼 수 있듯이 실제로 이 모든 것을 매우 간단하게 달성할 수 있습니다. <br><br><img src="/static/imghw/default1.png" data-src="http://files.jb51.net/do/uploads/allimg/111009/1933131.jpg" class="lazy" style="max-width:90%" style="max-width:90%" alt="" style="max-width:90%" border="1" href="/picshow/index784109.shtml"><br><br><br>코드 복사 <div class="msgheader"> <div class="right"> <span style="CURSOR: pointer" onclick="copycode(getid('phpcode32'));"> 코드는 다음과 같습니다: <u></u> </span><!DOCTYPE HTML> </div><html> </div><meta http-equiv="Content-Type" content="text/html; charset=utf -8"> <div class="msgborder" id="phpcode32"><title>문의 양식
="body">


>

< ;/body>


보시다시피 여기에는 기존 div가 없으며 새 태그 요소 헤더로 대체되었습니다. HTML5의 , footer 및 section 태그의 헤더 태그는 페이지의 헤드 영역을 지정하고, 섹션은 페이지의 주요 영역을 지정하며, 푸터 부분은 페이지의 테일 영역을 지정합니다. div와 비교할 때 그 의미는 더 명확하고 사용 습관과 의미상 더 일치합니다. 여기에서는 스타일을 통일하기 위해 CSS 클래스 본문도 지정됩니다.
폼 파트 디자인
다음으로 폼 파트 디자인을 살펴보겠습니다. 먼저 다음과 같이 코드를 살펴보겠습니다.





코드 복사


코드는 다음과 같습니다.



/label>



🎜>

다음은 HTML5와 HTML4의 입력 태그 차이점을 소개합니다. HTML5에서는 입력 태그에도 이름, ID와 같은 속성이 있습니다. 가장 큰 차이점은 사용자의 요구를 충족하기 위해 HTML5의 유형 속성에 많은 새로운 유형이 추가되었다는 것입니다. 불행하게도 현재 모든 브라우저가 이러한 새로운 유형 속성을 지원하는 것은 아니므로 이 문서에서는 HTML5에서 지원되는 일부 새로운 유형 속성에 대해서만 설명합니다. 위의 예에서 언급한 type=email과 같은 대부분의 브라우저는 사용자가 이메일만 입력할 수 있는 텍스트 상자입니다. 일부 브라우저에서 이메일 텍스트 상자를 지원하지 않더라도 기존의 type=text 텍스트 상자로 인식되므로 문제가 되지 않습니다. iOS 시스템에서는 type=email 속성을 만나면 쉽게 열립니다. 입력 이메일의 키보드 레이아웃은 다음과 같습니다:


type=email 태그에서 placeholder 속성에 주의하세요. "여기에 입력하세요"로 설정되어 있습니다. 즉, 사용자가 이 이메일 상자에 내용을 입력하지 않으면 사용자에게 입력하라는 텍스트가 자동으로 표시됩니다. 이는 매우 흥미롭습니다. 아래와 같이 알림 역할을 하며 많은 자바스크립트를 사용하여 작성하는 것보다 더 효과적입니다.

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

내 HTML5 웹 사이트에 오디오를 추가하는 방법은 무엇입니까? 내 HTML5 웹 사이트에 오디오를 추가하는 방법은 무엇입니까? Mar 10, 2025 pm 03:01 PM

이 기사는 & lt; audio & gt를 사용하여 HTML5에 오디오를 포함시키는 방법을 설명합니다. 형식 선택에 대한 모범 사례 (MP3, OGG Vorbis), 파일 최적화 및 재생에 대한 JavaScript 컨트롤을 포함한 요소. 다중 오디오를 사용하는 것을 강조합니다

사용자 입력에 HTML5 양식을 사용하는 방법은 무엇입니까? 사용자 입력에 HTML5 양식을 사용하는 방법은 무엇입니까? Mar 10, 2025 pm 02:59 PM

이 기사에서는 HTML5 양식을 작성하고 검증하는 방법을 설명합니다. 그것은 & lt; form & gt; 요소, 입력 유형 (텍스트, 이메일, 번호 등) 및 속성 (필수, 패턴, 최소, 최대). HTML5의 장점은 오래된 방법에 비해 형성됩니다

HTML5 페이지 가시성 API를 사용하여 페이지가 표시되는시기를 감지하려면 어떻게합니까? HTML5 페이지 가시성 API를 사용하여 페이지가 표시되는시기를 감지하려면 어떻게합니까? Mar 13, 2025 pm 07:51 PM

이 기사에서는 HTML5 페이지 가시성 API를 사용하여 페이지 가시성을 감지하고 사용자 경험을 향상 시키며 리소스 사용량을 최적화하는 것에 대해 설명합니다. 주요 측면에는 미디어 일시 정지, CPU 부하 감소 및 가시성 변경에 기반한 분석 관리가 포함됩니다.

뷰포트 메타 태그를 사용하여 모바일 장치에서 페이지 스케일링을 제어하려면 어떻게합니까? 뷰포트 메타 태그를 사용하여 모바일 장치에서 페이지 스케일링을 제어하려면 어떻게합니까? Mar 13, 2025 pm 08:00 PM

이 기사에서는 Viewport Meta 태그를 사용하여 모바일 장치의 페이지 스케일링을 제어하여 폭과 최적의 응답 성 및 성능을위한 초기 스케일과 같은 설정에 중점을 둡니다. character count : 159

Geolocation API로 사용자 위치 개인 정보 및 권한을 어떻게 처리합니까? Geolocation API로 사용자 위치 개인 정보 및 권한을 어떻게 처리합니까? Mar 18, 2025 pm 02:16 PM

이 기사는 지리적 위치 API를 사용하여 사용자 위치 개인 정보 및 권한 관리, 권한 요청, 데이터 보안 보장 및 개인 정보 보호법 준수에 대한 모범 사례를 강조하는 것에 대해 설명합니다.

HTML5 및 JavaScript로 대화 형 게임을 만드는 방법은 무엇입니까? HTML5 및 JavaScript로 대화 형 게임을 만드는 방법은 무엇입니까? Mar 10, 2025 pm 06:34 PM

이 기사는 JavaScript를 사용하여 대화식 HTML5 게임을 만드는 자세한 내용입니다. 게임 디자인, HTML 구조, CSS 스타일, JavaScript 로직 (이벤트 처리 및 애니메이션 포함) 및 오디오 통합을 다룹니다. 필수 JavaScript 라이브러리 (Phaser, PI

대화식 사용자 인터페이스에 HTML5 드래그 앤 드롭 API를 어떻게 사용합니까? 대화식 사용자 인터페이스에 HTML5 드래그 앤 드롭 API를 어떻게 사용합니까? Mar 18, 2025 pm 02:17 PM

이 기사는 HTML5 드래그 앤 드롭 API를 사용하여 대화식 사용자 인터페이스를 생성하고 요소를 드래그 가능하게 만들고 주요 이벤트를 처리하며 사용자 정의 피드백으로 사용자 경험을 향상시키는 방법을 자세히 설명합니다. 또한 일반적인 함정에 대해 설명합니다

클라이언트와 서버 간의 양방향 통신에 HTML5 WebSockets API를 어떻게 사용합니까? 클라이언트와 서버 간의 양방향 통신에 HTML5 WebSockets API를 어떻게 사용합니까? Mar 12, 2025 pm 03:20 PM

이 기사에서는 실시간, 양방향 클라이언트 서버 커뮤니케이션을위한 HTML5 WebSockets API를 설명합니다. 클라이언트 측 (JavaScript) 및 서버 측 (Python/Flask) 구현에 대해 자세히 설명하여 확장 성, 상태 관리,

See all articles