(예제1의 실행화면)
개인적으로 서버에 데이터 전송시에 Form태그를 사용하지 않았다
그러나 HTML에서 제공하는 강력한 기능들이 많이 준비되어 있어서 사용하는 편이 여러므로 좋다는걸 프로젝트를 진행하며 느꼈다
1. Form태그
HTML에서 form 태그는 사용자로부터 입력을 받아 서버로 데이터를 전송하기 위한 양식을 정의할 때 사용됩니다.
사용 이유
HTML에서 제공하는 다양한 type 기능을 사용할 수 있습니다 (이메일, URL 양식, 유효성 검사, Placeholder, 입력양식제한등)
Form 태그와 연관 태그의 타입
<form>: 블록 태그
<input>: 인라인 태그
<label>: 인라인 태그
예제1 ( 설명은 주석에 적음 )
<form name="profile" action="/전송주소" method="get" autocomplete="on" target="_blank" >
<!--
name은 서버에서 해당 form을 식별하기 위해 사용된다
action은 입력내용을 서버에 전송할 주소
target은 _blank로 설정할 경우 서버에서 받은 결과를 새탭으로 연다
enctype는 form데이터가 서버로 제출될때 어떻게 인코딩되는가를 설정한다
enctype의 인코딩방식
- application/x-www-form-urlencoded 기본값으로, 모든 문자들은 서버로 보내기 전에 인코딩함을 말한다
- multipart/form-data 모든 문자를 인코딩하지 않음을 명시함. 이 방식은 <form> 요소가 파일이나 이미지를 서버로 전송할때 사용한다
novalidate 모든 요소의 form데이터의 유효성검사를 하지 않음
-->
<fieldset> <!-- 요소들을 그룹화 -->
<legend>Form Elements</legend> <!-- <fieldset> 요소에 대한 캡션 -->
<label for="input1">Input Label</label> <!-- 입력 요소의 레이블 -->
<input type="text" id="input1" name="input1"> <!-- 입력 요소 -->
<br><br>
<label for="textarea1">Textarea Label</label> <!-- 다중 입력 요소의 레이블 -->
<textarea id="textarea1" name="textarea1"></textarea> <!-- 다중 라인 입력 요소 -->
<br><br>
<label for="select1">Select Label</label> <!-- 드롭다운 요소의 레이블 -->
<select id="select1" name="select1"> <!-- 드롭다운 요소 -->
<optgroup label="Group 1"> <!-- 드롭다운 옵션 그룹을 정의 -->
<option value="option1">Option 1</option> <!-- 드롭다운 옵션 -->
<option value="option2">Option 2</option> <!-- 드롭다운 옵션 -->
</optgroup>
<optgroup label="Group 2">
<option value="option3">Option 3</option>
</optgroup>
</select>
<br><br>
<label for="select1">Input Select Label</label> <!-- 입력가능 드롭다운 요소의 레이블 -->
<input type="text" name="input-dropdown" list="depList1">
<datalist id="depList1"> <!-- 입력가능 드롭다운 요소 -->
<option value="option1">option1</option>
<option value="option2">option2</option>
</datalist>
<br><br>
<button type="submit">Submit</button> <!-- 클릭 가능한 버튼 -->
</fieldset>
</form>※ 개인적으로 중요하다고 본 부분은 form태그의 속성의 enctype이다
파일전송시에 multipart/form-data로 설정해야한다
input의 속성종류
value : 입력 필드의 초기 값을 설정 (서버에 전송하는 값)
readonly : 읽기 전용 필드로 만들기
placeholder : 힌트 표시(필드 클릭 시 내용 사라짐)
autofocus : 페이지를 불러오자마자 특정 부분에 마우스 커서가 표시되도록 하는 것
autocomplete : 자동완성 설정
max / min : 입력 필드의 최대값과 최소값 지정
maxLength : 텍스트 필드에 최대로 입력할 수 있는 문자의 개수 지정
step : 숫자의 간격 설정 (date, datetime, datetime-local, month, week, time, number, range 타입에서 사용 가능)
required : 필수 입력 필드 지정(빈칸이면 안 넘어감)
type : input 태그의 타입을 지정 (텍스트 입력창, 이메일, 전화번호 양식, 파일 첨부 등)
타입종류(type)
text : 한 줄짜리 텍스트를 입력할 수 있는 텍스트 상자
search : 검색상자(크롬이나 사파리에서만 사용 가능)
tel : 전화번호 입력 필드
url : URL 주소를 입력 필드
email : 메일주소 입력 필드 (이메일 형식 검사)
password : 비밀번호 입력 필드
number : 숫자를 조절할 수 있는 화살표
range : 숫자 범위를 조절할 수 있는 슬라이드 막대
color : 색상표
checkbox : 체크박스 (2개 이상 선택 가능)
radio : 라디오 버튼 (1개만 선택 가능)
datetime : 국제 표준시(UTC)로 설정된 날짜와 시간
datetime-local : 지역 기준의 날짜와 시간
date : 지역 기준의 날짜(연, 월, 일)
month : 지역 기준의 날짜(연, 월)
week : 지역 기준의 날짜(연, 주)
time : 지역 기준의 시간(시, 분, 초)
button : 클릭 이벤트를 발생시키는 버튼(submit하지않음)
file : 파일 첨부 버튼
submit : 서버전송 버튼(submit함)
image : 이미지 submit 버튼
reset : 리셋 버튼 (모든 입력 초기화)
hidden : 서버로 보내는 값들을 보내는 필드(사용자에게는 보이지 않음)
2. button과 input의 차이점
button 태그
열고 닫는 태그안에 css가 적용된 텍스트나 이미지 입력가능하므로 이쁜 버튼을 만들수있다
input 태그
스스로 닫는 태그로 사용된다
button태그 사용시 주의사항
form태그안에서 button태그를 사용할때 반드시 type의 속성을 적어줘야한다
왜냐하면 브라우저에서 기본적으로 submit을 디폴트로 설정하기 때문이다
→ 좋은 습관은 button이든 input이든 버튼을 사용할시에 type을 적는 습관을 들이는게 좋다
예제2 (주석에 설명참고)
<form>
<!-- submit 전송하는 경우 -->
<input type="submit" value="버튼명">
<button type="submit">버튼명(이미지)</button>
<button><span>버</span><span>튼</span></button> <!-- button에 type속성이 없을시 submit 전송 (주의해야함) -->
<!-- submit 전송하지 않는 경우 -->
<input type="button" value="버튼명">
<button type="button">버튼명(이미지)</button>
</form>
<button>Form태그밖의 버튼</button> <!--type을 지정하지 않아도 된다-->3. hidden / readonly / disabled 의 차이점
hidden: 비표시 / 수정 불가 / 값 전송 가능readonly: 표시 / 수정 불가 / 값 전송 가능disabled: 표시 / 수정 불가 / 값 전송 불가능
참고