HTML 입력받은 데이터 서버로 전송하기(form, action, input, submit)

* HTML 입력받은 데이터 서버로 전송하기(form, action, input, submit)

1. 입력받기 (input 태그)

- type으로 입력 받을 형식 설정 가능.

- id='입력 받는 값 이름' 

- 입력된 값을 서버에서 id를 통해 끌어올 수 있음

- placeholder='' 를 통해 생성된 박스 안에 "아이디 입력" 등의 문구를 넣을 수 있다.

input 기본 틀 : <input type="text" placeholder="내용 입력">

• text 일반 텍스트를 입력받을 수 있습니다.
• password : 패스워드 입력 (입력값이 화면에 보여지지 않는다.) 
• button : 버튼 생성
• checkbox : 체크박스 생성
• radio : 라디오 버튼 생성
• reset : <form> 태그 안의 사용자 입력을 초기화
• submit : <form> 태그 내에 입력된 데이터를 서버로 전달

 

2. 입력 받은 값 서버에 연결 (form 태그, input 태그)

- form 태그 내 action="url(서버 페이지 주소 등, 입력 값 보낼 곳)" 지정 후

- intput type="submit"을 누름으로써 form 태그에 지정한 URL로 전송

- submit은 자동으로 데이터를 전송해 줄 수 있는 버튼이다. 해당 버튼의 기본 이름은 제출이며, value로 이름 변경이 가능하다.

<input type="submit" value='로그인'> // 로그인 이라는 이름의 버튼 생성

 

3. 예제 

아래 코드를 통해 만든 아이디/비밀번호 입력 폼

// action 값에 url 설정, doWrite.php 등으로도 설정 가능.
<form action='doWrite?'>
	<tr>
		<td>아이디</td>
 		<td><input id='userid' type='text' placeholder="제목 입력" /></td>
	</tr>
	<tr>
		<td>비밀번호</td>
		<td><input id='pwd' type='password' maxlength='5' placeholder="비번 입력" /></td>
 	<tr>
		<td><input type='submit' value='로그인'><td>
	</tr>
</form>