<form> : 정보를 제출하기 위한 태그들을 포함
* <form action="입력 데이터를 처리할 페이지 주소" method="입력 데이터를 서버에 전달할 방식"></form>
* action 속성 : 입력 데이터를 처리할 페이지 URL
* method 속성 : 입력 데이터를 서버에 전달할 방식을 명시
** GET 방식 : 주소에 데이터를 추가하여 서버에 전달하는 방식이며 중요도가 낮은 데이터를 전달할 때 주로 사용 (보통 확인을 하기 위해서 사용하기도함)
** POST 방식 : 데이터를 별도로 첨부하여 전달하는 방식이며 보안성 및 활용성이 GET 방식보다 뛰어남
<label> : input 요소마다의 라벨 /for 속성값을 input 요소의 id와 연결. input의 클릭 영역 확장
<input> : 입력을 받는 요소 / type type 속성을 통해 구분
<button> : 버튼
eg
<form
action="./01-result.html"
method="get"
>
<label for="name">이름</label>
<input id="name" name="my-name" type="text">
<br><br>
<label for="age">나이</label>
<input id="age" name="my-age" type="number">
<br><br>
<button type="submit">제출</button>
<button type="reset">초기화</button>
</form>
텍스트 관련 input 속성
placeholder : 빈 칸에 보이는 안내문
maxlength : 최대 길이
minlength : 최소 길이 / 위반시 submit이 거부
숫자 관련 input 속성
min : 최소값
max : 최대값
step : 간격
체크 관련 input 속성
checked : 체크박스&라디오 / 초기에 화면을 열때 체크되어 표시
name : 라디오 / 옵션들의 그룹으로 사용
* 이름을 지정해주는 속성. 데이터를 처리해야하는 페이지에서 사용. 같은 radio type옵션들은 반드시 같은 name속성을 가지고 있어야 함
value : 라디오 / 각 옵션마다 실제로 넘겨질 값
* 값(value)을 명시
파일 input 속성
accept : 받아들일 수 있는 파일 형식
multiple : 여러 파일 업로드 가능여부
eg. accept="image/png, image/jpeg"
multiple
input 요소 공통 속성
* value 속성은 <input> 태그에 초기값을 설정
* readonly 속성은 사용자가 수정할 수 없고 읽을수 만 있음. disabled 속성과의 차이는 값이 서버로 전송된다는 것 (disabled 는 사용자가 아무것도 할 수 없고 클릭조차 불가, 서버로 전송 x)
텍스트박스
textarea 전용 속성
cols : 글자수 단위의 너비. 기본 20
rows : 표시되는 줄 수
eg.
<form action="#" method="#">
Memo:<br>
<textarea name="memo" rows="10" cols="30"></textarea>
</form>
옵션 관련 속성
multiple 속성 : 태그 <select> 다중선택 가능, 드롭다운 대신 상자로 표시
selected 속성 : 태그 <option> 선택됨
+++ 08.06 (출처 : 코딩 자율학습)
form 태그
<form action="서버 url" method="get 또는 post"></form>action 속성에는 폼 요서에서 사용자와 상호작용으로 입력받은 값들을 전송할 서버의 url 주소를 적는다
method 속성에는 입력받은 값을 서버에 전송할 때 송신 방식을 적는다. 전송 방식에 따라 get 또는 post
일반적으로 폼 요소의 전송은 서버에서 처리하므로 서버 영역을 담당하는 개발자가 작성한다고 한다. 보안이 요구되는 정보라면 post 아니라면 get..?
input 태그
<input type="종류" name="이름" value="초깃값">type은 필수이고 name과 value 속성은 선택해서 사용가능
label 태그
label 태그는 form 태그 안에서 사용하는 상호작용 요소에 이름을 붙일 때 사용. 웹 접근성에 이용된다.
명시적인 방법은 label 태그의 for 속성과 상호작용 요소의 id 속성을 같은 값으로 설정
fieldset & legend 태그
fieldset 태그로 그룹을 지으면 그룹별로 박스 모양의 테두리가 생기고, 해당 요소들은 legend 태그로 이름을 붙일 수 있다.
textarea 태그
여러 줄의 입력 요소를 생성할 때는 input 태그가 아닌 textarea 태그를 사용한다.
select, option, optgroup
select 태그를 사용하면 combobox를 생성할 수 있다. combobox에 항목 하나를 추가할 때는 option 태그를 사용하고, 항목들을 묶고 싶다면 optgroup 태그를 사용한다.
<option value="마포구" selected>마포구</option>여러 개의 option 태그에 selected 속성을 사용하면 selected 속성이 마지막으로 사용된 option 태그가 기본값으로 선택되어 표시 된다.
button 태그
<button type="종류">버튼 내용</button>type 속성값은 폼을 서버에 전송할 목적이면 submit, 상호작용 요소에 입력된 내용을 초기화는 버튼이면 reset, 단순한 버튼이면 button
input 보다는 button을 주로 사용한다.
disabled 속성
input, textarea, select, button 태그에 사용하며 태그가 비활성화되면 입력 요소는 텍스트를 입력할 수 없고, 목록 상자는 항목을 선택할 수 없으며, 버튼 요소는 버튼을 클릭할 수 없다.
readonly 속성
상호작용 요소를 읽기 전용으로 변경
maxlength 속성
입력할 수 있는 글자수를 제한
checked 속성
요소를 선택된 상태로 표시한다. 선택 요소가 있어야 하므로 input 태그의 type 속성값이 checkbox나 radio인 요소에만 사용될 수 있다.
placholder 속성
입력 요소에 어떠한 값을 입력하면 되는지 힌트를 적는 용도로 사용. input 태그의 type 속성값을 tel로 지정하면 전화번호를 입력해야 하는데 웹 브라우저에 표시되는 tel 요소는 text 요소와 차이가 없어서 위 코드처럼 입력값에 대한 힌트를 적어주게 할수 있다.
