tel을 사용하면 HTML5는 전화 번호와 연결하여 사용하도록 설계된 필드 유형을 제공합니다.
전화번호: <입력 유형="tel" name="telefon">
스마트폰 및 태블릿에서 필드를 클릭하면 전화번호를 입력할 수 있는 숫자 키패드가 열립니다.
URL이 있는 인터넷 주소용 필드
URL 유형 필드는 인터넷 주소를 입력하기 위한 필드입니다.
<입력 유형="URL" />
URL 필드는 자동으로 유효성이 검사됩니다. 브라우저는 이러한 필드에 구문적으로 올바른 URL이 실제로 입력되었는지 확인해야 합니다.
출력이 있는 출력 필드
출력 필드는 콘텐츠를 출력하는 데 사용할 수 있습니다. 예를 들어 JavaScript와 관련하여 흥미로운 기능입니다. 이 필드는 변수를 출력하는 데 사용할 수 있습니다. 그러나 이 필드는 계산된 값을 출력하는 데에도 사용할 수 있습니다. 이 필드는 데이터 출력 전용입니다. 따라서 사용자 입력은 불가능합니다.
예시입니다:
<script> /* <![CDATA[ */ function output(){ word1="Hello," word2="World!" document.forms[0][0].value=word1+word2 } /* ]]> */ </script>이 예제에서는 두 개의 변수가 선언되었습니다. 이 변수의 내용은 출력 필드에 표시되어야 합니다.
<body onload="output()"> <form action="evaluation.php" method="get" name="form"> <output name="field" /> </form> </body>
Opera와 같은 브라우저는 원하는 값을 표시합니다. 반면에 출력으로 아무것도 할 수 없는 브라우저는 아무것도 표시하지 않습니다.출력은 세 가지 속성을 인식합니다.
- form - 출력 요소가 포함된 형식입니다.
- for - 출력 필드가 참조하는 필드 또는 값에 대한 참조를 설정합니다. 값과 필드는 공백으로 구분해야 합니다.
- name - 이름을 입력하면 양식이 전송될 때 필드의 내용도 함께 전송됩니다.
- value - 필드의 값을 지정합니다.출력은 물론 수학적 계산에도 적합합니다. 예를 들어 프롬프트 필드를 사용하여 값을 쿼리한 다음 함께 곱할 수 있습니다.
<!DOCTYPE html> <html> <head> <title>output</title> <script> /* <![CDATA[ */ function multi(){ a=parseInt(prompt("Digit 1.",0)); b=parseInt(prompt("Digit 2.",0)); document.forms["form"]["result"].value=a*b; } /* ]]> */ </script> </head> <body onload="multi()"> <form action="#" method="get" name="form"> <label> 곱셈의 결과입니다:</label> <출력 이름="결과" /> </output> </form> </body> </html>페이지를 호출하면 프롬프트 창이 열리고 첫 번째 값을 요청합니다.
확인으로 입력을 확인하면 두 번째 창이 열립니다. (두 창 중 하나에서 취소를 클릭하면 결과는 NaN, 즉 숫자가 아님으로 표시됩니다.)
두 번째 창에서도 확인으로 확인하면 스크립트가 곱셈 결과를 값으로 출력 필드로 전송합니다.
진행률 표시기와 진행률 표시기
진행률 요소를 사용하여 진행률 표시를 구현할 수 있습니다. 이는 예를 들어 파일 다운로드와 관련하여 흥미롭습니다..gif "초보자를 위한 HTML 및 CSS(16부): 폼 (4)")
Google은 이미 이 요소를 해석하고 있습니다. 이 요소를 인식하지 못하는 다른 브라우저는 해당 콘텐츠를 표시합니다.
예시입니다:
다운로드가 실행 중입니다... <progress value="250" max="1000"> <span id="downloadProgress">25</span>% </progress>
진행률 요소에는 두 가지 속성이 있습니다:
- 최대 - 총 필요한 단계 수를 지정합니다.
- value - 이미 완료된 단계 수를 지정합니다.진행률 요소는 JavaScript가 작동할 때만 정말 흥미로워집니다. 진행률과 JavaScript의 조합이 어떻게 사용되는지 보여주는 가장 좋은 방법은 예시를 통해 보여주는 것입니다.
이 예는 여러 단계로 완료해야 하는 양식을 기반으로 합니다. 다음 정보가 차례로 요청됩니다:
- 이름
- 성
- 거리
- 우편번호
- 도시
물론 이 몇 가지 값은 한 페이지에서 쿼리할 수 있습니다. 하지만 사용자로부터 많은 정보를 얻어야 한다면 어떨까요? 그렇다면 광범위한 양식은 오히려 방해가 될 수 있습니다. 따라서 양식을 여러 페이지로 분할하는 것이 좋습니다.
양식을 불러온다고 가정해 봅시다.
여기에서 이름을 입력하라는 메시지가 표시됩니다. 필드 아래의 상태 표시줄은 진행률 요소를 사용하여 구현했습니다.
<fieldset id="step1" style="display: none;"> <p>이름: <input type="text" name="vname" size="30"></p> <p><progress max="5" value="1">단계 1 / 5</progress></p> <p><입력 유형="button" value="다음" onclick="nextStep(2)"></p> </fieldset>
이 구문에서는 몇 가지 중요한 사항이 있습니다. 첫째, 개별 필드세트 요소는 보이지 않게 설정되어 있습니다. 언뜻 보기에는 그렇게 보이지 않더라도 양식은 실제로는 한 페이지로만 구성되어 있습니다. 개별 필드는 각각 고유한 필드 집합 요소에 삽입되었습니다. 그리고 이러한 필드 집합 요소(콘텐츠 포함)는 보이지 않습니다.
JavaScript 전환 기능을 사용하여 실제로 숨겨진 요소는 각각의 다음 버튼을클릭하면 표시되도록 합니다. 이것이 어떻게 보이는지는 이 튜토리얼의 뒷부분에서 설명합니다.
하지만 먼저 양식으로 돌아가 보겠습니다. 다음 버튼을클릭하면 양식으로 안내됩니다. 진행률 요소는 얼마나 진행되었는지 보여줍니다.
참고로 브라우저가 진행률 요소를 해석하지 못해도 큰 문제가 되지 않습니다. 이러한 브라우저는 단순히 이 요소의 내용을 표시하기 때문입니다.
<progress max="5" value="1">단계 1 / 5</progress>
진행률 표시기 대신 2/5단계 구성표에 따른 텍스트가 표시됩니다.
양식은 다음과 같습니다:
<form method="post" action="#"> <fieldset id="step1" style="display: none;"> <p>이름: <input type="text" name="vname" size="30"></p> <p><progress max="5" value="1">단계 1 / 5</progress></p> <p><입력 유형="button" value="다음" onclick="nextStep(2)"></p> </fieldset> <fieldset id="step2" style="display: none;"> <p>성: <input type="text" name="nname" size="30"></p> <p><progress max="5" value="2">2단계 / 5</progress></p> <p><입력 유형="버튼" 값="다음" onclick="nextStep(3)"></p> </fieldset> <fieldset id="step3" style="display: none;"> <p>Street: <input type="text" name="street" size="30"></p> <p><progress max="5" value="3">단계 3 / 5</progress></p> <p><입력 유형="버튼" 값="다음" onclick="nextStep(4)"></p> </fieldset> <fieldset id="step4" style="display: none;"> <p>PLZ: <input type="text" name="plz" size="30"></p> <p><progress max="5" value="4">단계 4 / 5</progress></p> <p><입력 유형="button" value="다음" onclick="nextStep(5)"></p> </fieldset> <fieldset id="step5" style="display: none;"> <p>위치: <입력 유형="텍스트" 이름="위치" 크기="30"></p> <p><프로그레스 최대="5" 값="5">단계 5 / 5</프로그레스></p> <입력 유형="제출" 값="종료"> </fieldset> </form>
여기서 세 가지가 중요합니다:
- 각 필드세트 요소에 ID가 할당됩니다.
- 모든 필드 집합 요소가 표시되도록 설정됩니다.
- 다음 단계 함수가 버튼에 할당됩니다.다음 단계(n) 함수는 다음과 같습니다:
<script> /* <![CDATA[ */ function naechsterSchritt(n) { switch(n) { case 1: document.getElementById('schritt1').style.display = "block"; break; case 2: document.getElementById('schritt1').style.display = "none"; document.getElementById('step2').style.display = "block"; break; case 3: document.getElementById('step2').style.display = "none"; document.getElementById('step3').style.display = "block"; break; case 4: document.getElementById('step3').style.display = "none"; document.getElementById('step4').style.display = "block"; break; case 5: document.getElementById('step4').style.display = "none"; document.getElementById('step5').style.display = "block"; break default: break; } } } nextstep(1); /* ]]> */ </script>
이 함수는 현재 필드세트 요소를 표시하고 다른 필드세트 요소를 숨깁니다. 함수는 필드 정의 뒤에 배치해야 합니다. 따라서 닫는 </form> 뒤에 배치하는 것이 가장 좋습니다.
