입력양식 - form

사용자가 입력한 양식을 서버로 전송하는 것을 form 이라 한다.

 

################ 텍스트 입력 ################

 

"입력form의 제목 "<input type="형식"> ; 입력 form을 형식에 따라 입력할 수 있음.

 

<input type="submit"> ; 제출(전송)버튼

 

<form action="URL"> ; 제출버튼을 누르면 URL로 이동(전송).

 

<input name="제목"> ; form action으로 전송할때 input에 넣은 값들 앞에 붙는 제목들.

 

<input value="기본값"> ; 입력 form 초기값에 "기본값"이 적혀서 나온다.

 

<textarea> ; 여러줄 입력할 수 있는 form </textarea>

 

<textarea cols="숫자"> ; 숫자만큼 열을 입력할수 있게 크기가 커짐.

 

<textarea rows="숫자"> ; 숫자만큼 행을 입력할수 있게 크기가 커짐.

 

################ 선택 ################

 

<select name="이름" multiple> ; 이름으로 구성된 항목을 다중선택할 수 있음.

 

<option value="url전송값"> 이름 </option> ; 이름으로 구성된 선택 박스 생성.

 

<input type="radio" name="이름" value="red"> ; Radiobutton(단일선택). 같은 이름으로 구성된 것들은 그룹이 되며 서로 1개씩만 선택가능. 끝에 "checked" 붙은 항목이 기본값으로 설정됨.

 

<input type="checkbox" name="size" value="95"> ; Checkbox(다중선택). 같은 이름으로 구성된 것들은 그룹이 되며 서로 다중 선택 가능. 끝에 "checked" 붙은 항목이 기본값으로 설정됨.

 

################ 버튼 ################

 

<input type="submit"> ; 제출(전송)버튼

 

<input type="button" value="버튼" onclick="alert('hello world')"> ; 기본 버튼

 

<input type="reset"> ; 초기화

 

################ 데이터전송 - hidden ################

 

<input type="hidden" name="hide" value="egoing"> ; 서버로 값을 전송할때 안보이게 하는.(보안?)

 

################ 컨트롤의 제목 - label ################

 

<label for="속성"> text </label> ; 무언가의 이름표. input 태그의 속성을 입력하여 같은 그룹으로 묶임. 영역지정기능.

 

################ method ################

 

<form action="URL" method="post"> ; 'post' method 방식으로 사용시, 데이터를 숨겨서 전송.('get'방식은 이와 반대로 데이터가 url에 보여짐)

 

################ 파일업로드 ################

 

<input type="file" name="profile"> ; 파일선택 버튼 생성

​

<form action="URL" method="post" enctype="multipart/form-data"> ; 파일업로드 기능 사용시 enctype="multipart/form-data" 무조건 사용해야함.