[개미의 걸음 HTML&CSS 7차시] 양식을 생성하는 태그(form, input, label, fieldset, legend, textarea)

<from>태그

<form> 다양한 폼 요소 </form>

 

<form>태그의 주요 속성

속    성	설    명
method	사용자가 입력한 내용들을 서버 쪽 프로그램으로 어떻게 넘겨줄지를 정하는 속성 속성 값에는 get과 post가 있다.   *get : 주소 표시줄에 사용자가 입력한 내용이 그대로 들어는 방식           [256~4096byte의 데이터를 서버로 넘길 수 있음]   *post : 사용자가 입력한 내용이 드러나지 않는 방식           [표준 입력(standard input)으로 넘겨주어 입력 내용 길이에 제한없음]
name	폼의 이름을 설정하는 속성[여러 개의 <form>태그 사용시 유용]
action	<form>태그 안의 내용들을 전송할 페이지를 설정하는 속성
autocomplete	입력창에서 자동완성기능을 설정할 때 사용하는 속성 기본값이 on이므로 자동완성기능을 사용하고 싶지 않을 때는 속성 값을 off로 지정
target	<action>태그에서 지정한 스크립트 파일을 원하는 위치에서 열도록 해주는 속성

 

 

<input>, <label>태그

• <input>태그를 사용하면 사용자가 입력할 창을 생성
• <input>태그의 type속성을 이용하거나 <button>태그를 이용해 버튼을 만들 수 있음
• <label>태그를 이용하면 입력창 앞에 입력할 내용을 간략하게 표현 가능
• <input>태그의 type속성을 radio나 checkbox 속성값을 지정할 경우, bullet을 클릭해야만 선택 가능
  <label>태그를 사용할 경우 해당 bullet뿐만 아니라 bullet의 텍스트를 클릭해도 선택 가능

    <input>태그의 type속성의 값

속성 값	설    명
hidden	사용자에게 보이지 않지만 서버로 넘겨지는 값들을 지정
text	한 줄짜리 텍스트를 입력할 수 있는 텍스트 상자 삽입
number	숫자를 조절할 수 있는 화살표 삽입
range	숫자를 조절할 수 있는 슬라이드 막대를 삽입
datetime	국제표준시(UTC)로 설정된 날짜, 시간 삽입
datetime-local	사용자가 있는 지역을 기준으로 날짜와 시간을 삽입
date	사용자가 있는 지역을 기준으로 날짜[연, 월, 일]를 넣음
month	사용자가 있는 지역을 기준으로 날짜[연, 월]를 넣음
week	사용자가 있는 지역을 기준으로 날짜[연, 주]를 넣음
time	사용자가 있는 지역을 기준으로 시간[시, 분, 초 , 분할 초]를 넣음
checkbox	주어진 항목에서 2개 이상 선택 가능한 bullet[checkbox button] 삽입
radio	주어진 항목에서 1개만 선택 가능한 bullet[radio button] 삽입
button	버튼을 삽입
reset	리셋 버튼을 삽입
file	파일을 첨부할 수 있는 버튼 삽입
submit	서버 전송 버튼 삽입
image	submit버튼 대신 사용할 이미지 삽입
color	색상 표를 삽입
search	검색 상자 삽입
tel	전화번호 입력 필드를 삽입
url	URL주소를 입력할 수 있는 필드를 삽입
email	email주소를 입력할 수 있는 필드를 삽입
password	passward를 입력할 수 있는 필드를 삽입

[<input>태그 더 알아보기 ↓]

2020/08/08 - [HTML] - [개미의 걸음 HTML 8차시] 태그의 이해

# URL[Uniform Resource Locator]

웹 사이트의 주소

 

 

 

<fieldset>, <legend> 태그

• <fieldset>태그를 이용하면 시각적으로 구분하기 용이하게 구역을 나눌 수 있다.
• <legend>태그를 이용하면 <fieldset>태그로 구분한 영역의 내용들을 포괄하는 제목 설정 가능

 

 

 

<textarea>태그

• <textarea>태그를 사용하면 여러줄의 텍스트를 입력할 수 있는 글상자를 생성 가능
• placeholder속성을 사용하면 텍스트를 입력할 때 도움이 되도록 입력란에 입력 양식 및 설명을 표시 가능
  해당 텍스트 상자에 내용을 입력할 경우, 속성값은 사라짐
• readonly속성을 이용하면 입력란에 텍스트를 작성할 수 없음
  <textarea>태그에서는 속성값이 출력되지 않음