a , button , input , form 태그

1. a 태그 의미, 역할, html5에서의 특징

a 태그는 문서를 "링크(연결)" 시키기 위해 사용하는 태그이다. a 태그의 속성으로는 href, target, title, download 등등 이 있다. 그중 가장 중요한 속성은 href 태그이다. href 속성이 없으면 download, hreflang, media, rel, target 및 type 속성은 존재할 수 없다.

 

​2. a href 속성

href : 연결할 주소를 지정(링크의 목적지를 나타낸다)

*href으로 가능한 값

1. 절댓값 url (예: href="https://www, naver, com") 

2. 로컬에서의 파일 주소 (예: href="test.html")   

3. 페이지 내의 지정된 ID를 가진 요소에 링크 (예: href="#test")

4. 기타 프로토콜 (예: https://, ftp://, mailto:, file: 등등)

5. javascript (예: javascript:alert('Hello');)

 

3.button 태그 type종류와 역할(브라우저 지원범위)

button 태그는 URI를 연결하지 않고 단순하게 사용자 인터페이스만을 "조작"하기 위한 태그로서 <button type="button">로 마크업 한다.  button 태그를 사용할 때는 항상 type속성을 지정한다. type을 명시하지 않으면 어떤 브라우저는 Form Submit기능을 실행하기 때문에 반드시 type속성을 button으로 지정해 주어야 한다.

속성	속성값	역할	브라우저 지원범위
type	button	일반 버튼 역할(주로 자바스크립트를 이용한 기능 구현에 많이 사용된다 - 클릭이벤트 발생)	ie, firefox,chrome,safari,opera
	submit	데이터를 서버로 전송하기 위해 사용되며, input의 type속성인 submit과 같다.
	reset	사용자가 입력한 내용을 초기화 하는데 사용하며, input의 type속성인 reset과 같다.

4. <a>,<button>요소 비교

링크와 같은 연결은 <a>요소 사용,

스크립트로 움직이는 버튼에 대해서 <button> 요소 사용

 

5. <input> type종류와 역할

속성	속성값	역할	브라우저 지원범위
type	text	기본값, 한 줄의 텍스트 입력칸을 만듦	ie, firefox,chrome,safari,opera
	password	text속성과 같지만, 문자를 숨겨서 표시	ie, firefox,chrome,safari,opera
	checkbox	체크박스를 만듦(선택 항목 중 여러개 선택 가능)	ie, firefox,chrome,safari,opera
	radio	라디오 버튼(선택 항목 중 1가지만 선택 가능)	ie, firefox,chrome,safari,opera
	button	클릭 버튼	ie, firefox,chrome,safari,opera
	submit	데이터 전송 버튼	ie, firefox,chrome,safari,opera
	reset	입력한 데이터 초기화 버튼	ie, firefox,chrome,safari,opera
	file	파일 선택 창을 만듦	ie, firefox,chrome,safari,opera
	hidden	사용자에게 보이지 않는 숨김 창을 만듦	ie, firefox,chrome,safari,opera
	image	이미지로 된 전송버튼을 만듦(src 속성으로 이미지 url 지정)	ie, firefox,chrome,safari,opera
	html5에 새로 추가된 속성값
	color	색상 선택 창을 만듦	ie, firefox,chrome,safari,opera
	date	날짜 입력창을 만듦(년,월,일)	ie, firefox,chrome,safari,opera
	datetime	날짜 시간 창을 만듦(년,월,일,시,분,초,초의 분할) 표준시간	ie, firefox,chrome,safari,opera
	datetime-local	날짜 시간 창을 만듦(년,월,일,시,분,초,초의 분할) 표준시간 없음	ie, firefox,chrome,safari,opera
	email	email 주소 창을 만듦	ie, firefox,chrome,safari,opera
	month	달과 년 창을 만듦(표준 시간 없음)	ie, firefox,chrome,safari,opera
	number	숫자 입력을 위한 창을 만듦(숫자 제한을 둘 수도 있음)	ie, firefox,chrome,safari,opera
		max- 최대값 min- 최소값 step 허락하는 숫자 간격 value 기본값	ie, firefox,chrome,safari,opera
	range	정확한 값이 중요하지 않는 숫자를 입력하는 창을 만듦 (슬라이더 장치 처럼)	ie, firefox,chrome,safari,opera
	search	검색 창을 만듦	ie, firefox,chrome,safari,opera
	tel	전화 번호 입력 창을 만듦	ie, firefox,chrome,safari,opera
	time	시간 입력 창을 만듦(표준 시간 없음)	ie, firefox,chrome,safari,opera
	url	주소 입력 창	ie, firefox,chrome,safari,opera
	week	주와 년 입력 창 (표준 시간 없음)	ie, firefox,chrome,safari,opera

 

HTML 4.01과 HTML5에서의 차이

autofocus, form, formaction, formenctype, formmethod, formnovalidate 및 formtarget과 같은 새로운 속성이 있다.

 

6. <form>의  action과 method란? 그리고 <form> 제작 시 기본적인 마크업 구조

1) method 속성 : 데이터를 전달하는 방식(GET 또는 POST)

-GET: 양식 데이터를 제출할 때의 기본방법이다. GET을 사용하면 제출 된 양식 데이터가 URL에 표시된다.

(주의사항)

• 폼 데이터를 이름/값 쌍으로 url에 추가합니다.
• URL의 길이는 제한되어 있습니다.(약 3000자)
• 중요한 데이터를 보내려면 GET을 사용하지 않는다.(URL에 표시되기 때문이다.)
• 사용자가 결과를 북마크 하려는 양식 제출에 유용하다.(URL에 입력값이 표시되기 때문이다.)
• GET은 Google의 검색어 문자열과 같이 보안되지 않은 데이터에 더 좋다.

 

-POST: 양식 데이터에 중요한 정보나 개인 정보가 포함되어 있으면 항상 Post를 사용한다. post method는 제출된 양식 데이터를 URL에 표시하지 않는다.

(주의사항)

• POST에는 크기 제한이 없으므로 많은 양의 데이터를 보낼 수 있다.
• POST를 사용한 양식 제출은 북마크 할 수 없다.

2) action 속성 : 데이터를 전송할 url

 

3)<form> 제작 시 기본적인 마크업 구조

 

 

 

*참조

w3school

button요소 사용 이유 및 방법