글
- HTML 기본기 자습서 : https://developer.mozilla.org/ko/docs/Learn/Forms
https://developer.mozilla.org/ko/docs/Learn/Getting_started_with_the_web/HTML_basics
HTML 폼 가이드
이 가이드는 HTML 폼을 숙달 시키는데 도움이 되는 문서입니다. HTML 폼은 사용자와 상호작용할 수 있는 매우 강력한 도구입니다. 그러나 역사적으로 나 기술적인 이유로 사용자에게 항상 명확하게 기능을 제공할 수 있는 것은 아닙니다. 이 가이드에서 HTML 폼 관점에서 스타일 구조, 사용자 위젯으로 데이터 다루기 등 모든 것을 다룰 것입니다. 이러한 강력한 기술들을 즐기길 바랍니다!
항목
나의 첫 HTML 폼
HTML 폼 구성 방법 (en-US)
기본 폼 위젯 (en-US)
CSS와 HTML 폼
HTML 폼 스타일 (en-US)
HTML 폼을 위한 고급 스타일 (en-US)
폼 위젯을 위한 호환성 테이블 속성 (en-US)
데이터 주고 받기 (en-US)
데이터 유효성 검사 (en-US)
사용자 폼 위젯 만드는 방법 (en-US)
JavaScript를 통해서 폼 전달 하기 (en-US)
FormData 객체 사용 (en-US)
기존 브라우저에서 HTML 폼 (en-US)
HTML 문서
HTML 요소
1.HTML(HyperText Markup Language)은 웹을 이루는 가장 기초적인 구성 요소로, 웹 콘텐츠의 의미와 구조를 정의할 때 사용합니다. HTML 이외의 다른 기술은 일반적으로 웹 페이지의 모양/표현 (CSS), 또는 기능/동작 (JavaScript)을 설명하는 데 사용 https://developer.mozilla.org/ko/docs/Learn/Forms#html_%EB%AC%B8%EC%84%9C
2. "Hypertext(하이퍼텍스트)"란 웹 페이지를 다른 페이지로 연결하는 링크
3. HTML 요소는 "태그"를 사용해서 문서의 다른 텍스트와 구분합니다. 태그는 "<", 태그 이름,">" 로 이루어집니다. 태그 안의 요소 이름은 대소문자를 구분하지 않습니다. 즉, 대문자, 소문자, 아니면 섞어서도 작성할 수 있습니다. 예를 들어<title>요소는<Title>,<TITLE>, 그 외 기타 가능한 모든 방법으로 작성
4. CSS, 그리고 HTML에 스타일을 적용하는 방법 (예를 들어, 사용된 텍스트 크기나 폰트를 변경하고, 테두리 선, 그림자 효과를 추가하고, 페이지의 레이아웃을 다단으로 편집하고, 애니메이션이나 다른 시각적인 효과를 추가할 수 있습니다.)
JavaScript, 그리고 웹 페이지에 동적인 기능을 추가하는 방법 (예를 들어, 현재 위치를 찾아 지도 위에 표시하고, 버튼을 누를 때 마다 UI 요소를 노출하거나 숨길 수 있고, 사용자의 데이터를 로컬 시스템에 저장하는 것 등의 방법을 알 수 있습니다.)
5. 멀티미디어 요소 추가하기(embedding)
이 과정은 웹페이지에 HTML을 이용하여 멀티미디어 요소를 추가하는 방법, 이미지를 추가할 수 있는 다른 방법들, 그리고 비디오, 오디오, 혹은 다른 웹페이지를 삽입하는 방법을 살펴봅니다.
6. HTML 폼 요소 - https://developer.mozilla.org/ko/docs/Learn/Forms#html_%EB%AC%B8%EC%84%9C
폼 요소는 웹에서 굉장히 중요합니다. 폼 요소는 회원가입, 로그인, 피드백 보내기, 물건 구입과 같이 웹사이트와 상호작용하는데 필요한 굉장히 많은 기능을 제공합니다. 이 과정은 폼 요소의 클라이언트 측 요소를 만드는 것으로 시작됩니다.
7. HTML 테이블
웹페이지에 표 형태의 데이터를 이해 가능하고, 접근할 수 있는 방법으로 표현하는 것은 도전이 될 수 있습니다. 이 과정은 좀 더 세부적인 기능인 캡션(caption)과 요약(summary)를 적용하는 방법과 함께 테이블 마크업의 기본을 다룹니다.
8. 폼에서 다음과 같은 HTML 요소들을 사용할 것이다. <form>,<label>,<input>(en-US),<textarea>(en-US), and<button>.
9. 우리의 예제에서는 다음과 같이 3가지 데이터 이름을 지정했다. "user_name", "user_email" and "user_message". 이 데이터는 "/my-handling-form-page"로 HTTP POST 방식으로 전송된다.
서버 측에서는 URL에서 HTTP 요청에 의해 구현된 3개의 키/벨류 항목의 목록 데이터를 받게 된다. 스크립트로 데이터를 다루는 방법은 너에게 달려있다. 각각 의 서버 측 언어들은(PHP, Python, Ruby, Java, C# 등)자신만의 방식으로 이를 다룬다. 더 깊게 들어가는 것은 이문서의 범위를 벗어나지만 더자세히 알고 싶다면 다음 문서를 참조하시오. Sending and retrieving form data (en-US).
10. https://developer.mozilla.org/ko/docs/Learn/Forms
11. 고급주제
12. CORS 활성화 이미지
crossorigin 속성을 적절한 CORS 헤더와 조합하면 <img>요소의 이미지를 외부 출처에서 가져올 수 있으며, 마치 현재 출처의 이미지인 것처럼<canvas>에서도 사용할 수 있습니다.
CORS 설정 특성
<img>,<video>등 CORS를 지원하는 일부 HTML 요소는 crossorigin 특성(crossOrigin 속성)을 보유하며, 해당 요소가 데이터를 가져올 때의 CORS 요청을 통제할 수 있습니다.
rel="preload"로 콘텐츠 미리 불러오기
<link>요소, rel 특성의 preload 값을 사용하면 페이지를 불러온 직후 빠르게 사용해야 하는 리소스에 대해 선언적인 가져오기 요청을<head>안에 추가할 수 있습니다. 이렇게 지정한 리소스는 페이지 불러오기 라이프사이클의 초기, 브라우저의 주 렌더링이 시작하기도 전에 시작하고, 페이지의 첫 렌더링이 덜 막혀 성능이 개선됩니다. 이 글에서는 preload 작동 방식에 대한 기본적인 지침을 제공합니다.
13. 참고서- https://developer.mozilla.org/ko/docs/Web/HTML#%EC%B0%B8%EA%B3%A0%EC%84%9C
[NEWBIS TEST]
<!doctype html><html><head><title>문서 제목</title></head></html><head>안에 배치할 수 있는 요소
<title><base><link><style><meta><script><noscript><template><form action="/my-handling-form-page" method="post"><div><label for="name">Name:</label><input type="text" id="name"/></div><div><label for="mail">E-mail:</label><input type="email" id="mail"/></div><div><label for="msg">Message:</label><textarea id="msg"/></div></form><input type="text" value="by default this element is filled with this text"/><textarea>by default this element is filled with this text</textarea><form action="/my-handling-form-page" method="post"><div><label for="name">Name:</label><input type="text" id="name"/></div><div><label for="mail">E-mail:</label><input type="email" id="mail"/></div><div><label for="msg">Message:</label><textarea id="msg"/></div><div class="button"><button type="submit">Send your message</button></div></form>
CSS
Copy to Clipboard
form {
/* Just to center the form on the page */
margin: 0 auto;
width: 400px;
/* To see the outline of the form */
padding: 1em;
border: 1px solid #ccc;
border-radius: 1em;
}
form div + div {
margin-top: 1em;
}
label {
/* To make sure that all label have the same size and are properly align */
display: inline-block;
width: 90px;
text-align: right;
}
input,
textarea {
/* To make sure that all text fields have the same font settings
By default, textareas have a monospace font */
font: 1em sans-serif;
/* To give the same size to all text field */
width: 300px;
-moz-box-sizing: border-box;
box-sizing: border-box;
/* To harmonize the look & feel of text field border */
border: 1px solid #999;
}
input:focus,
textarea:focus {
/* To give a little highlight on active elements */
border-color: #000;
}
textarea {
/* To properly align multiline text fields with their labels */
vertical-align: top;
/* To give enough room to type some text */
height: 5em;
/* To allow users to resize any textarea vertically
It does not work on every browsers */
resize: vertical;
}
.button {
/* To position the buttons to the same position of the text fields */
padding-left: 90px; /* same size as the label elements */
}
button {
/* This extra margin represent roughly the same space as the space
between the labels and their text fields */
margin-left: 0.5em;
}
HTML
Copy to Clipboard
<form action="/my-handling-form-page" method="post"><div><label for="name">Name:</label><input type="text" id="name" name="user_name"/></div><div><label for="mail">E-mail:</label><input type="email" id="mail" name="user_email"/></div><div><label for="msg">Message:</label><textarea id="msg" name="user_message"/></div><div class="button"><button type="submit">Send your message</button></div></form>
********************************************************************
댓글 없음:
댓글 쓰기