폼, Form
- 입력 양식, 입력 컨트롤을 담당한다.
- 클라이언트(사용자)로부터 입력장치(키보드, 마우스,, )을 통해서 데이터를 입력받는 역할을 한다.
- 입력데이터는 서버로 전송되어 업무에 활용되거나 데이터베이스에 저장된다.
🔻<form> 태그🔻
- 모든 입력 컨트롤을 감싸는 컨테이너
- 스스로는 랜더링 결과가 없다.
- 입력한 값을 서버로 전송하는 역할을 한다.(***)
🔻<form> 속성🔻
1. form.method
- 데이터를 전송하는 방식
- 1. POST
- 데이터를 상자 안에 담아서 전송하는 방식
- 전송하는 데이터의 최대 길이의 제한이 없다.
- 2. GET
- 데이터를 송장에 붙여서 전송하는 방식이다.
- 주소창 뒤에 전송되는 데이터가 노출되어 전달된다.
- 보안 상 좋지않다.
- 전송하는 데이터의 최대 길이가 256자(8000 바이트)로 제한되어 있다.
- 따라서, 긴 데이터는 전송하지 못한다.
2. form.action
- 데이터를 수신하는 서버측 URL
- 받는 사람의 주소를 쓴다.
- 서버측에서 동작하고 있는 프로그램(JSP, Servlet, Spring)의 주소를 넣는다.
<body>
<h1>데이터 입력</h1>
<form method="POST" action="ex18_server.jsp">
나이 : <input type="text" name="age">
<br>
<input type="submit" value="보내기">
</form>
</body>
🔻<input> 태그🔻
- 인라인 태그
- 단독 태그
🔻<input> 속성🔻
1. type
- 입력 컨트롤 종류를 지정해준다.
- text, password, checkbox, radio, file, hidden 등이 있다.
- 밑에서 자세히 설명을 한다.
2. name
- 서버 측으로 데이터를 전송할 때 사용되는 식별자 역할을 한다.
- 하나의 HTML 페이지 안에서 동일한 name 속성을 가진 여러 입력 요소를 사용할 수 있다.
3. id
- CSS와 JavaScript에서 사용되는 고유한 식별자를 제공한다.
- 해당 요소를 스타일링하거나 JavaScript로 조작할 수 있다.
- 한 페이지 내에서 고유해야 한다.
4. class
- 여러 요소를 그룹화하거나, CSS와 JavaScript에서 스타일이나 동작을 적용하기 위한 식별자 역할을 한다.
- 여러 요소에 동일한 클래스를 지정할 수 있다.
5. size
- 입력 필드의 길이(글자 수)를 지정한다.
- 주로 텍스트 입력 필드에서 사용되며, 화면에 표시되는 길이를 설정한다.
6. maxlength
- 입력 필드에 입력할 수 있는 최대 길이(글자 수)를 지정한다. 이를 초과하여 입력할 수 없다.
7. value
- 입력 컨트롤의 초기값을 설정한다.
- 텍스트 입력 필드에 미리 입력된 값을 제공할 때 사용된다.
8. readonly
- 입력 필드를 읽기 전용으로 만든다.
- 사용자는 값을 수정할 수 없지만, 서버로 값이 전송된다.
9. disabled
- 입력 필드를 비활성화하여 사용자가 값을 수정할 수 없게 한다.
- 비활성화된 입력 필드의 값은 서버로 전송되지 않는다.
10. accesskey
- Alt 키와 함께 설정한 키를 누르면 해당 입력 필드로 포커스가 이동한다.
- 예를 들어, accesskey="s"로 설정하면 Alt + S를 누르면 해당 입력 필드로 이동한다.
11.autofocus
- 페이지가 로드될 때 해당 입력 필드에 자동으로 포커스를 맞춥니다.
12. autocomplete
- 자동 완성 기능을 설정한다.
- on : 자동 완성
- off : 자동 완성 끄기
🔻<input> 속성 type 종류🔻
1. text
- 텍스트를 입력할 수 있는 단일 행의 입력 필드를 제공합니다.
- 일반적으로 한 줄짜리 텍스트를 입력할 때 사용됩니다.
2. password
- 암호상자
- 사용자에게 암호를 입력할 수 있는 입력 필드를 제공한다.
- 입력한 문자가 화면에 보이지 않는다.
- 기본적으로 value 속성을 사용하여 초기값을 설정하지 않는 것이 좋다.
<body>
<form method="POST" action="ex18_server.jsp">
텍스트 박스(단일 라인, 기본값 없음):
<input type="text" name="txt1" id="txt1" class="txt" size="30" accesskey="s" autofocus>
<hr>
텍스트 박스(단일 라인, 기본값 있음):
<input type="text" name="txt1" id="txt2" class="txt" size="30" value="hong" accesskey="s" autofocus>
<hr>
텍스트 박스(암호):
<input type="password">
</body>
3. checkbox
- 체크박스
- 여러 옵션 중에서 사용자가 하나 이상을 선택할 수 있는 체크박스를 제공한다.
- value 속성을 사용하여 체크박스의 값을 지정할 수 있다.
- <label> : 텍스트를 클릭하여도 값이 선택된다.
- checked 옵션 : 기본 선택된다.
4. radio
- 라디오버튼
- 여러 옵션 중에서 사용자가 하나만 선택할 수 있는 라디오 버튼을 제공한다.
- 같은 name 속성을 가진 라디오 버튼은 그룹으로 묶여 하나만 선택된다.
- <label> : 텍스트를 클릭하여도 값이 선택된다.
- checked 옵션 : 기본 선택된다.
<body>
<form method="POST" action="ex18_server.jsp">
<h3>체크박스</h3>
<label><input type="checkbox" checked>독서</label>
<label><input type="checkbox">달리기</label>
<label><input type="checkbox">영화보기</label>
<hr>
<h3>라디오버튼</h3>
<label><input type="radio" name="rbGender">남자</label>
<label><input type="radio" name="rbGender">여자</label>
<label><input type="radio" name="rbGender" checked>선택안함</label>
</body>
5. file
- 파일 업로드
- 사용자가 컴퓨터에서 파일을 선택하여 업로드할 수 있는 입력 필드를 제공한다.
- Open File Dialog Box(열기 대화 상자) 대화 상자가 나타난다.
6. hidden
- 히든 태그
- 사용자에게 보이지 않고, 서버로 데이터를 전송할 때 사용되는 히든 필드이다.
- 주로 개발자가 서버에 데이터를 전달하는 용도로 사용된다.
7. submit
- 서버로 제출하는 버튼이다.
- 사용자가 클릭하면 해당 폼의 데이터가 서버로 전송된다.
8. reset
- 폼의 내용을 초기 상태로 되돌리는 버튼이다.
- 모든 선택 취소 및 텍스트박스는 리셋이 된다.
9. image
- 그래픽 이미지를 사용한 버튼이다.
- src 속성을 사용하여 이미지의 경로를 지정한다.
- submit 기능과 동일하다.
<body>
<form method="POST" action="ex18_server.jsp">
파일선택:
<input type="file">
<hr>
히든 태그:
<input type="hidden" name="txtname" value="홍길동">
<hr>
1. 전송버튼: <input type="submit" value="전송하기">
<br><br>
2. 취소버튼: <input type="reset" value="초기화">
<br><br>
3.이미지버튼 :<input type="image" src="images/button.png">
</form>
</body>
🔻<input> 이외 폼 입력 태그🔻
1. <textarea>
- 쌍태그 방식
- 텍스트 박스 - 다중 라인
- 여러 줄의 텍스트를 입력할 수 있는 입력란이다.
- 대부분의 속성은 텍스트 박스와 유사하다.
- 주로 긴 텍스트나 설명을 받을 때 사용되어 maxlength 속성이 없다.
- 공백공간을 주의하여 초기값을 설정해야 한다.
- 속성
1. cols : 입력란의 가로 크기를 지정하여 텍스트 박스의 가로 길이를 결정한다.
2. rows : 입력란의 세로 크기를 지정하여 텍스트 박스의 세로 길이를 결정한다.
<body>
<form method="POST" action="ex18_server.jsp">
텍스트 박스(다중 라인):
<textarea cols="50" rows="5">
초기값
1
2</textarea>
</form>
</body>
2. <select>
- 셀렉트 박스 = 콤보 박스(Combo), 드랍다운 리스트(DropDown List)
- 옵션을 선택할 수 있는 드롭다운 목록이다.
- 예를 들어, 날짜, 카테고리, 선호 언어 등을 선택할 때 사용됩니다.
- 단일 선택 및 다중 선택이 가능한 컨트롤이다.
- <optgroup>, <option>과 같이 사용한다.
<body>
<form method="POST" action="ex18_server.jsp">
셀렉트 박스:
<select>
<optgroup label="자바">
<option>클래스</option>
<option>메소드</option>
<option>배열</option>
</optgroup>
<optgroup label="오라클">
<option>테이블</option>
<option>서브쿼리</option>
<option>조인</option>
<option>프로시저</option>
</optgroup>
<optgroup label="HTML">
<option>태그</option>
<option>엔티티</option>
<option>PCDATA</option>
</optgroup>
</select>
</form>
</body>
'WEB > HTML' 카테고리의 다른 글
| [HTML] HTML5의 새로운 기능② (progress, meter, details, fieldset, marquee,video) (0) | 2023.09.24 |
|---|---|
| [HTML] HTML5의 새로운 기능①(placeholder, required, email, url, number, range, color, date) (0) | 2023.09.24 |
| [HTML] table 태그 (생성, 색상, 정렬, 크기, 셀병합) (0) | 2023.09.21 |
| [HTML] 인라인 태그와 블럭 태그 (0) | 2023.09.20 |
| [HTML] img 태그 (src, alt, width, height, border) (0) | 2023.09.20 |
