WEB/HTML

[HTML] 폼 <form>, <input>, <select>, <textarea> 태그

developer of the night sky 2023. 9. 21. 16:48

폼, 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>

 

 

 

저작자표시 (새창열림)