1. form 요소
<form action="처리할페이지주소" method="get|post> </form>
// action은 입력받은 데이터를 처리할 서버 상의 스크립트 파일의 주소
// method는 입력받은 데이터를 서버에 전달할 방식을 명시
*method의 2가지 방식.
(1) GET : 주소에 데이터를 추가하여 전달.
데이터가 주소 입력창에 그대로 나타나며, 전송할 수 있는 데이터의 크기 또한 제한적.
크기가 작고 중요도가 낮은 정보를 보낼 때 사용.
(2) POST: 데이터를 별도로 첨부하여 전달하는 방식.
데이터가 외부에 드러나지 않으며, 데이터 크기 제한 없음.
보안성 및 활용성이 GET보다 좋다.
2. input요소
<input type="text" name="username">
- 텍스트 입력(text) // 사용자로부터 한 줄의 텍스트를 입력받을 수 있음.
- 비밀번호 입력(password) // 사용자로부터 입력받지만 화면에는 문자나 숫자대신 별표나 작은 원 모양이 표시.
- 라디오 버튼(radio) //checked 는 처음에 미리 선택되는 옵션 지정 , 1개만 선택가능
<input type="radio" name="e" value="park" checked> 승일 <br>
<input type="radio" name="e" value="kim" > 명훈 <br>
<input type="radio" name="e" value="choi" > 도원 <br>
<input type="radio" name="e" value="ha" > 준석<br>
- 체크박스(checkbox) // 여러개 체크 가능 , disabled는 해당 옵션 선택할 수 없게 하는 설정
checked 미리 선택되어 있는 옵션
<form>
<input type="checkbox" name="lecture" value="html" checked> HTML <br>
<input type="checkbox" name="lecture" value="css"> CSS <br>
<input type="checkbox" name="lecture" value="java"> JAVA <br>
<input type="checkbox" name="lecture" value="cpp" disabled> C++
</form>
- 파일 선택(file) // 사용자로부터 파일을 전송받을 수 있음.
<form><input type="file" name="upload_file" accept="image/*"></form>
//accept를 이용하여 파일의 확장자 및 종류 명시 가능.
- 선택 입력(select) // 여러옵션이 드롭다운 리스트. 단 하나 옵션만 입력 가능
<select name="fruit">
<option value="apple"> 사과
<option value="orange" selected> 귤
<option value="strawberry"> 딸기
<option value="peach"> 복숭아
</select>
- 문장 입력(textarea) // 사용자로부터 여러 줄의 텍스트를 입력받음.
// rows속성과 cols속성을 이용하여 textarea 요소의 크기 자유롭게 지정 가능.
<textarea name="message" rows="5" cols="30">
여기에 적으세요.
</textarea>
- 버튼 입력(button)
<button type="button" onclick="alert('버튼을 클릭하셨군요!')">
버튼을 눌러주세요.
</button>
- 전송 버튼(submit) // 사용자로부터 입력받은 데이터를 서버의 폼핸드럴로 제출하는 버튼.
<form action="/examples/media/request.php">
어릴 때 자신의 별명을 적어주세요 : <br>
<input type="text" name="nickname" value="별명"><br><br>
<input type="submit" value="전송">
</form>
- 필드셋(filedset)
<form action="/examples/media/request.php">
<fieldset>
<legend>입력 양식</legend>
이름 : <br>
<input type="text" name="username"><br>
이메일 : <br>
<input type="text" name="email"><br><br>
<input type="submit" value="전송">
</fieldset>
</form>
* input 요소의 속성 *
(1) value 속성 및 readonly, disabled 속성
// value는 초기값 설정. 나머지는 상세 설정.
<form>
이름 : <br><input type="text" name="student_name"><br>
학번 : <br><input type="text" name="student_id"><br>
학과 : <br><input type="text" name="department" value="컴퓨터공학과"><br>
</form>
만약에 여기서 <br><input type="text" name="department" value="컴퓨터공학과" readonly ><br> 를 추가한다면 수정 불가.
만약에 여기서 <br><input type="text" name="department" value="컴퓨터공학과" disabled ><br> 를 추가한다면 수정불가, 아예 그 필드를 사용불가!
(2) maxlength 속성 // 문자의 최대 길이 지정.
<input type="text" name="name" value="또치" maxlength="10">
(3) size 속성 // 필드의 길이
<input type="text" name="student_name" value="또치" size="30">