클라이언트의 정보를 서버로 보내기 위해서 form 태그를 사용한다.
form 태그 내에서는 input 태그, button 태그 등을 사용할 수 있다.
<form>
<input type =""> <!-- 단일 태그라서, </input> 필요 없다. -->
type text(한줄입력)
password(암호처리) --- 가입할 때 비밀번호 * 처리되는 것
checkbox(다중선택) --- 가입할 때 여러개 선택하는 것
radio(단일선택) --- 남자냐 여자냐
button(사용자정의이벤트)
file(첨부파일) --- 가입할 때 첨부파일 찾아보기
reset(초기화)
hidden(입력받지 않은 데이터 전송)
submit(입력받은 모든 데이터를 전송) --- form태그 전체의 내용을 전송한다.
<textarea> 여러 줄 입력
</textarea>
</form>
기타 타입 참조
submit 버튼을 누르면 form 태그 내의 정보를 모두 서버에 전달한다.
submit 기능을 하는 아이콘을 누르면, 새로고침 버튼이 깜빡거린다. (request-response 프로세스가 진행 된 것이다. 이때, 서버의 응답이 느리면 깜~~~빡 하게 된다.)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<form>
<input type="submit">
</form>
</body>
</html>
톰캣 서버의 Timeouts 설정을 통해 응답 속도를 조정할 수도 있다.
submit 타입의 값을 지정하면, 화면에 나타나는 글자가 바뀐다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<form>
<input type="submit" value ="전송">
</form>
</body>
</html>네이버 로그인 버튼의 type도 submit이다.
from 태그에 action 값을 지정하면, 버튼을 눌릴 시 해당 링크로 이동한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<form action = "http://www.naver.com">
<input type="submit" value ="전송">
</form>
</body>
</html>radio 버튼
name 속성명에 따라 그룹으로 묶인다. 같은 그룹 내에서는 하나만 선택 가능하다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<form action = "http://www.naver.com">
아이디 : <input type="text" size = "30"><br>
암호 : <input type="password"><br>
<strong>희망연봉</strong><br>
<input type ="radio" name ="salary"> 2500~2800<br/>
<input type ="radio" name ="salary"> 2800~3000<br/>
<input type ="radio" name ="salary"> 3000~3200<br/>
<input type ="radio" name ="salary2"> 3200~3400<br/>
<input type ="radio" name ="salary2"> 3400~4000<br/>
<input type ="radio" name ="salary2"> 4000 이상<br/>
<input type="submit" value ="전송">
</form>
</body>
</html>
checkbox 버튼 : 중복허용
textarea : 자기소개서 등 텍스트 문장입니다.
file : 첨부파일 등의 기능을 합니다.
전체 실습코드
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!--
<form>
<input type =""> --- 단일 태그라서, </input> 필요 없다.
type text(한줄입력)
password(암호처리) --- 가입할 때 비밀번호 * 처리되는 것
checkbox(다중선택) --- 가입할 때 여러개 선택하는 것
radio(단일선택) --- 남자냐 여자냐
button(사용자정의이벤트)
file(첨부파일) --- 가입할 때 첨부파일 찾아보기
reset(초기화)
hidden(입력받지 않은 데이터 전송)
submit(입력받은 모든 데이터를 전송) --- form태그 전체의 내용을 전송한다.
<textarea> 여러 줄 입력
</textarea>
</form>
-->
<form action = "http://www.naver.com">
<fieldset>
<lable>아이디 : <input type="text" size="30"></lable>
<br> <label for="pwd">암호 : </label><input type="password"
id="pwd"><br>
<br>
</fieldset>
<fieldset>
<legend>희망연봉</legend><br>
<input type ="radio" name ="salary"> 2500~2800<br/>
<input type ="radio" name ="salary"> 2800~3000<br/>
<input type ="radio" name ="salary"> 3000~3200<br/>
<input type ="radio" name ="salary2"> 3200~3400<br/>
<input type ="radio" name ="salary2"> 3400~4000<br/>
<input type ="radio" name ="salary2"> 4000 이상<br/>
</fieldset>
<strong>사용언어(중복선택가능)</strong><br>
<input type="checkbox" name="lang">JAVA<br>
<input type="checkbox" name="lang">C<br>
<input type="checkbox" name="lang">C++<br>
<input type="checkbox" name="lang">Python<br>
<input type="checkbox" name="lang">HTML<br>
<input type="checkbox" name="lang">Javascript<br>
<strong>취미(중복선택가능)</strong><br>
<input type="checkbox" name="hobby">개발<br>
<input type="checkbox" name="hobby">디버깅<br>
<input type="checkbox" name="hobby">테스트<br>
<strong>자기소개</strong><br>
<textarea rows="5" cols ="50"></textarea>
<strong>첨부파일</strong><br>
<input type="file" size="100"><br><br>
<input type="submit" value ="전송">
</form>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</body>
</html>'웹 프로그래밍 > HTML' 카테고리의 다른 글
| [HTML] a 태그에 대해 알아보자 (0) | 2020.06.26 |
|---|---|
| [HTML] form 태그 실습 (0) | 2020.06.12 |
| [HTML] 링크 기능이 있는 게시판 만들어보기(table, a 태그) (0) | 2020.06.12 |
| [HTML] 계산기 모양 구현하기 <input type = "button"/> (0) | 2020.06.12 |
| [HTML] 한 번에 여러 줄의 코드를 수정하기 (alt + shift + a) (0) | 2020.06.11 |
