HTML태그 - 입력양식태그

 

HTML 태그 - 입력 양식 태그

 

<form action="http://validator.w3.org/check" method="get">
  <label for="url">URL 주소 입력</label>
  <input id="url" type="text" name="url" />
  <input type="submit" value="전송" />
</form>

▼ 소스코드 살펴보기

form 요소 : 사용자가 키보드나 마우스로 입력한 내용을 받아들이는 HTML 폼을 생성하는 요소→ action 속성 : 폼을 전송할 URL을 지정

action = "http://validator.w3.org/check" (W3C 검증기)
→ W3C의 웹페이지로 이동하는데 입력한 값이 해당 페이지에 전송하여 우리의 마크업을 검증

→ method 속성 : 폼에 전송할 방식을 지정

    - GET방식 : 전송을 하게 되면 서버가 URL을 통해서 값을 받는 방식

    - POST방식 : 전송을 하게 되면 서버에 값을 URL이 아닌 숨겨져서 보내지는 방식

 

input 요소 : 텍스트 입력뿐만 아니라 전송 버튼, 라디오 버튼, 체크박스 등 여러가지로 표현 가능

Type의 값	데이터종류	특징
text	일단텍스트	텍스트 입력 창
password	비밀번호	가려지는 양식 (********)
radio	라디오 버튼	같은 name 속성 그룹 내 하나만 선택 가능 미리 선택되도록 하려면 해당버튼에 checked 속성 추가
checkbox	체크박스	라디오랑 다르게 중복선택 가능
button	버튼	클릭 가능한 버튼
submit	제출버튼	입력 값을 전송하는 버튼
reset	초기화버튼	입력 값을 초기화하는 버튼
file	파일	파일을 선택할수있는 버튼

▼ HTML5에 추가된 <input>태그의 type속성

Type의 값	데이터 종류	특징
color	색상	색상을 선택할 수있는 양식
datetime-local	날짜와 시간	날짜와 시간을 선택할수있는 양식
month	연도와 월	연도와 월을 선택할수있는 양식
number	숫자	숫자를 선택할수 있는 양식
range	범위 컨트롤	슬라이더 바로값을 선택할 수있는 양식 min, max, step, value(기본값) 속성 사용
time	시간	시간을 선택할 수있는 양식
week	연도와 주	연도와 주를 선택할 수있는 양식

label 요소 : 폼 요소에 어떤 값을 넣어야 하는지 라벨을 붙여주는 요소

→ for속성에 해당하는 폼 요소의 id이름을 입력해서 연결함(id가 없을 경우 라벨 안에 넣어서 표현 가능)

→ 가능 요소 : button, input, progress, select, textarea

→ 웹 접근성 기준으로 폼 입력 요소가 있으면 이에 맞는 label 요소를 반드시 가지고 있어야 한다.

 

 

▼ form의 추가 요소

select요소와 option요소 : 내부에 한 개 이상의 option 요소를 가지고 있으며 사용자는 option을 선택하고 선택된 요소의 값이 서버에 전송 (드롭다운 리스트를 만드는 태그)

<select name="lesson">
  <option value="html">HTML</option>
  <option value="css">CSS</option>
  <option value="java">Java</option>
  <option value="jquery">jQuery</option>
</select>

textarea요소 :  여러 줄을 가지는 입력 창을 표현

- 높이와 너비를 가진 글 박스이기 때문에, 해당하는 속성을 필수로 선언

- width, height가 아닌 cols(요소의 너비), rows(요소의 높이)의 속성 사용.

- 내용을 넣으면 기본값으로 들어가는데 들어가는 내용은 pre 요소처럼 줄 바꿈을 모두 인식

<textarea name="content" cols="40" row="5"></textarea>

 

 

 

 

 

 

 

 

참고자료

• https://developer.mozilla.org/ko/docs/Web/HTML/Element
• poiemaweb.com/html5-syntax
• webberstudy.com/html-css/