입력양식 태그는 사용자가 정보를 입력받는 공간을 말한다.
회원가입, 게시글 업로드와 같이 무언가를 입력해서 서버로 전송하거나 제품 주문시 옵션을 선택하고 주소를 입력하고 주문버튼을 누르는 등의 모든 과정들이 입력 양식에 해당한다
입려양식태그를 공부하기 앞서 우선 클리이언트(Clint)와 서버(Server)와의 관계에 대해 이해해야 하며, 서버(제공자)는 웹페에지를 제공해주는 대상이고 클라이언트(고객)는 웹페이지를 받는 대상이다.
클라이언트의 요청(request)은 크게 두가지로 나뉜다. 웹페에지를 요청하는 것과 데이터 처리를 요청하는 것이다.
클라이언트가 서버로 데이터를 전달할 때 사용하는 가장 기본적인 방법은 입력 양식을 사용하여 클라이언트로부터 데이터를 입력받아 보내는 것이다.
※<form>태그
1 . 입력 양식은 form 태그를 사용해서 전체를 감싼다. form 태그는 서버와 관련되 내용이 있다. 클라이언트가 입력 양식에 데이터를 입력하고 submit 버튼을 클릭하면 지정된 방법으로 지정된 파일에 데이터를 전달한다.
2 . 사용자로부터 다양한 형태의 데이터를 입력받기 위해 요소들을 담는 컨테이너 역할을 한다.
3 . 입력양식 지정을 위한 기본태그로 아래 태그들이 사용되며 <form>만으로는 결과 화면에서 아무것도 나타나지 않는다.
<from>태그의 속성
1 . action 속성 : 입력 받은 값을 전송할 서버의 프로그램 url을 저장하게 된다.
2 . method 속성 : 데이터를 전달하는 방을 지정하며 get,post방식(두 방식 모두 사용가자 입력학 데이터를 서버로 보내는 기능은 동일)이 있다. 즉, method속성의 방식으로 acation 속성장소에 데이터를 전달한다.
- Get
-기본적으로 get은 서버에 데이터를 요청할 때 사용한다.
-양식 데이터를 전송할때 기본 메소드는 get 방식이다. url에 데이터를 직접 입력해 전달한다.
-url에 표시되기 때문에 중요한 데이터를 전송할 때는 get을 사용하면 안된다.
-크기에 제한이있다
- Post
-회원가입이나 게시판에 글을 작성하는것 같이 데이터를 서버에 전송할 때 사용한다.
-전송 위치를 입력한다.
-중요정보,개인정보가 포함되어 있으면 post 방식을 사용하는것이 좋다
-크기에 재한이 있어 많은 양의 데이터 전송이 가능하다.
3. name : 입력값에 붙이는 이름으로 서버에서 참조할 수 있는 변수 형태가 된다. 일반적으로 입력값을 서버에서 처리할 떄 사용하게 되며 서버 구현에 따라 데이터에비읏 테이블 주고의 엔티티 클래스를 자동으로 매핑하는 경우 엔티티 클래스의 필드 이름과 동일한 이름을 사용하야 합니다.
※<input>태그
-사용자가 데이터를 입력할 수있는 여러 유형의 입력 양식을 지정한다. 속성(type값에 따라 사용 사능한 속성이 달라진다.)
type속성으로 입력 양식의 종류를 나타내고 name속성으로 서버에 전송될 데이터 이름을 지정 합니다. value 속성은 기본 입력값을 지정할때 사용하고 placeholder는 입력 항목에 대한 설명문을 넣을때 사용 합니다.
※<select>태그 : 드롭다운 박스로 목록중에서 선택할 수 있는 양식
-속성: name,size, multiple
※<optgroup>태그 : <select>안에서 목록을 그룹화
※<option>태그 : <select>의 선택 항목을 지정
※<button>태그 : 입력 버튼을 생성
-속성:type,name,value
필수속성은 type이며 아래의 것들을 사용할 수 있다
- text : 글자 입력(한 줄 짜리 텍스트) 양식 생성
- password : 비밀번호 입력 양식 생성
- file : 파일 업로드를 위한 파일 선택 양식 버튼 생성
- checkbox : 체크 박스 생성
- radio : 라디오 버튼 생성
- hidden : 해당 내용 표시안함, 숨겨진 상태로 데이터 입력
- submit : 데이터를 서버로 전송하는 제출 버튼 생성
- button : 버튼(클릭) 생성
- image : 이미지 형태 생성
- reset : 초기화 버튼 생성
(참고)
-https://dinfree.com/lecture/frontend/121_html_4.html#m1
예제
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>입력양식태그</title>
</head>
<body>
<form name="form_id" action="jsp/writeprocess.jsp" method="post">
<input type="hidden" name="name" value="hidden">
<!-- 보이지 않는 입력 양식: 사용자로 부터 데이터를 입력받지 않고 서버로 데이터를 전달할 때 필요하다. -->
<ul>
<li><input type="text" name="id" placeholder="아이디 입력"></li>
<!-- text 는 문자열 데이터를 받는다. -->
<li><input type="password" name="pwd" placeholder="비밀번호 입력"></li>
<!-- password 는 문자열 데이터를 받는데, 별이나 원모양의 기호로 표시된다. -->
<li><input type="button" name="btn" value="버튼"></li>
<!-- button 는 버튼을 생성한다. value 속성값이 버튼에 표시된다. -->
<li><input type="file" name="file"></li>
<!-- 파일 입력폼으로 파일 업로드 컨트롤을 생성한다. -->
<li>
<input type="checkbox" name="hobby" value="농구" checked> 농구
<input type="checkbox" name="hobby" value="만화"> 만화
</li>
<!-- 체크박스 생성: 여러개의 항목을 선택할 수 있음 -->
<li>
<input type="radio" name="gender" value="남자" checked> 남자
<input type="radio" name="gender" value="여자"> 여자
</li>
<!-- 라디오 버튼 생성: 단일 선택 -->
<li><input type="submit" value="전송"></li>
<!-- submit 는 버튼을 생성한다. value 속성값이 버튼에 표시된다. 입력폼에 작성한 데이터를 서버로 전달한다. -->
<li><input type="reset" value="리셋"></li>
<!-- 입력폼에 입력한 데이터를 모두 초기화 한다. -->
</ul>
</form>
</body>
</html>
결과물
예제
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>입력양식태그</title>
</head>
<body>
<form name="form_id" action="jsp/writeprocess.jsp" method="post">
<input type="hidden" name="name" value="hidden">
<!-- 보이지 않는 입력 양식: 사용자로 부터 데이터를 입력받지 않고 서버로 데이터를 전달할 때 필요하다. -->
<ul>
<li><input type="text" name="id" placeholder="아이디 입력"></li>
<!-- text 는 문자열 데이터를 받는다. -->
<li><input type="password" name="pwd" placeholder="비밀번호 입력"></li>
<!-- password 는 문자열 데이터를 받는데, 별이나 원모양의 기호로 표시된다. -->
<li><input type="button" name="btn" value="버튼"></li>
<!-- button 는 버튼을 생성한다. value 속성값이 버튼에 표시된다. -->
<li><input type="file" name="file"></li>
<!-- 파일 입력폼으로 파일 업로드 컨트롤을 생성한다. -->
<li>
<input type="checkbox" name="hobby" value="농구" checked> 농구
<input type="checkbox" name="hobby" value="만화"> 만화
</li>
<!-- 체크박스 생성: 여러개의 항목을 선택할 수 있음 -->
<li>
<input type="radio" name="gender" value="남자" checked> 남자
<input type="radio" name="gender" value="여자"> 여자
</li>
<!-- 라디오 버튼 생성: 단일 선택 -->
<li><input type="submit" value="전송"></li>
<!-- submit 는 버튼을 생성한다. value 속성값이 버튼에 표시된다. 입력폼에 작성한 데이터를 서버로 전달한다. -->
<li><input type="reset" value="리셋"></li>
<!-- 입력폼에 입력한 데이터를 모두 초기화 한다. -->
</ul>
</form>
</body>
</html>
결과물
'Html' 카테고리의 다른 글
| 09.입력양식태그 (0) | 2022.09.23 |
|---|---|
| 0.0 VS Code 설정 (0) | 2022.09.21 |
| 07. 공간분할태그 (0) | 2022.09.20 |
| 06. 테이블태그 (0) | 2022.09.20 |
| 05. 하이퍼링크 태그 (0) | 2022.09.20 |