[HTML] 2021.01.08 DAY_52 태그사용4. _ HTML Form Control

2021. 1. 8. 17:57ㆍWeb_Front-end/HTML

[ 9. HTML Form Control ]

java.swing의 컴포넌트 == html의 form control

 

[ label , Titledborder, fieldset ]

먼저, label이라는 개념을 알고 넘어가자.
label은 java.swing의 컴포넌트 label과 같은 의미로 사용된다


<label>
- input 태그 등의 이름을 알려줄 때 일반텍스트대신 사용하는 개념이다
<label>이름표</label><input type = "text" name = "fist_name"/>
<titledborder>
- 제목을 가진 테두리를 만들 때
- <form> 태그 안에서 사용한다
<fieldset>


[ 1_ input 태그]

접속자의 정보를 받기 위해 제공하는 HTML의 객체들
<input> <select> <textarea> 의 객체가 제공된다
입력된 정보는 <form>태그를 사용하여 Back-end로 전송할 수 있다

<input> 태그속성들
<input type = "생성할객체"/> 


- 속성
- readonly = "readonly" : 사용자가 편집할 수 없다 - Back-end로 값을 전송할 수 있다
- disabled = "disabled"  : 사용자가 편집할 수 없다 - Back-end로 값을 전송할 수 없다
- value : 설정된 초기값이다, 지울 수 있다
- autofocus : 사용자가 입력할 input창에 커서가 깜빡인다
- placeholder : 사용자에게 보여지는 메세지, 값을 입력하면 더이상 보이지 않는다. 무엇을 입력할지 알려주는 메세지로 사용가능하다

 

- 사용자가 입력하는 창
<input type = "text" name = "이름"size = "보여지는 크기(주로CSS처리)" maxlength = "최대입력글자수" value = "설정될값" readonly = "readonly"disabled = "disabled" autofocus = "true" placeholder = "사용자에게 보여질 메세지"/> 

 

 

- 사용자가 비밀번호를 입력하는 창
<input type = "password" name = "이름"  id = "아이디" size = "보여지는 크기" maxlength = "최대입력글자수" value = "설정될값" readonly = "readonly" disabled = "disabled" autofocus = "true" placeholder = "사용자에게 보여질 메세지"/> 

 

- 사용자에게 보여지지 않고, Back-end로 값을 전달할 때
<input type = "hidden" name = "이름"  id = "아이디" value = "설정될값" /> 
nly" disabled = "disabled" > 보여질값

 

- 체크박스 : 여러개를 선택할 수 있다
<input type = "checkbox" name = "이름"  id = "아이디" value = "Back-end로 전송할값" checked = "checked" readonly = "readonly" disabled = "disabled" > 보여질값

 //value와 보여질값은 상관관계가 없다

 


- 라디오 체크 : 하나만 선택할 수 있다 
<input type = "radio" name = "이름"  id = "아이디"  value = "Back-end로 전송할값" checked = "checked" readonly = "readonly" disabled = "disabled" > 보여질값

//value와 보여질값은 상관관계가 없다

 

- 버튼 _ button
<input type = "button"  id = "아이디" 
value = "버튼라벨" readonly = "readonly" disabled = "disabled" /> 버튼모양

- 버튼 _ submit : <form> 태그안에 존재하는 HTML Form Control의 값을 Back-end로 전송하는 일
<input type = "submit"  id = "아이디" value = "버튼라벨" readonly = "readonly" disabled = "disabled" /> 버튼모양

- 버튼 _ reset : <form> 태그안에 존재하는 HTML Form Control의 값을 초기화시키는 일
<input type = "reset"  id = "아이디" value = "버튼라벨" readonly = "readonly" disabled = "disabled" /> 버튼모양

 

- 버튼 _ file : 접속자의 HDD에서 파일을 선택하는 일
JavaScript | JSP 에서 값을 받아오고, 유효성 검증은 할 수 있지만 값을 넣는 것은 할 수 없다(보안)
<input type = "file" name = "이름" id = "아이디"/> 버튼모양

 

- 이미지 : 클릭되었을 때 submit 효과를 가진다 (<form> 태그안에 존재하는 HTML Form Control의 값을 Back-end로 전송하는 일)
- submit이나 image를 클릭하면 JavaScript에서 유효성검증이 실패하더라도 전송된다 _ 따라서, 잘 안쓴다

<input type = "image" name = "이름" id = "아이디" src = "이미지경로" />

[ 2_ select ]

<select> : 여러개의 옵션 중 선택하는 창
<select name = "이름" id = "아이디" size = "보여질 옵션의 갯수">
  <option value = "전송할 값"> 보여질 값 </option>
  <option value = "전송할 값"> 보여질 값 </option>
  ...
</select>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>select</title>
</head>
<body>

	<form method="get" action="test1.jsp">
		<select name="fruit">
			<option value="none">--과일선택--</option>
			<option value="딸기">딸기</option>
			<option value="오렌지">오렌지</option>
			<option value="사과">사과</option>
			<option value="메론">메론</option>
		</select> <br>

		<!-- size는 보여줄 옵션의 갯수를 설정하는 일 -->
		<select name="name" size="10">
			<option value="김포비">김포비</option>
			<option value="김밍키">김밍키</option>
			<option value="권콩">권콩</option>
			<option value="박자두">박자두</option>
			<option value="이길자">이길자</option>
		</select> <br>

		<!-- selected="selected" 특정 옵션이 선택된 상태로 제공 -->
		<select name="fruit1">
			<option value="none">--과일선택--</option>
			<option value="포도">포도</option>
			<option value="오렌지">오렌지</option>
			<option value="한라봉" selected="selected">한라봉</option>
			<option value="배">배</option>
			<option value="감">감</option>
		</select> <br>
		
		<input type="submit" value="전송"/>
	</form>

</body>
</html>

[ 3_ textarea ]

<textarea> 

<textarea name = "이름" id = "아이디" cols= "한줄에 쓸 글자수" rows = "행의 수">
 사용자에게 보여질 값(value 사용하지 않는다)
</textarea>
  
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>textarea</title>
</head>
<body>

<textarea name="ta"></textarea>
<br>
<label>rows, cols</label><br>
<textarea name="ta1" rows="5" cols="30"></textarea><br>
<!-- textarea에서 값을 넣을 때
	1. HTML이나 JSP에서는 태그사이에 값을 넣는다
	2. JavaScript에서는 value속성을 사용하여 값을 넣는다 -->
<textarea rows="5" cols="30">안녕하세요 오늘은 월요일입니다</textarea>


</body>
</html>

 

 

 

[ form 태그 ]

HTML Form Control의 값을 Back-end로 전송할 때 사용

형식) 
<form name = "이름"
id = "아이디"
method = "전송방식"
action = "Back-end에 값을 받을 페이지"
enctype = "전송방식">
    <input/>
    <input/>
      ..
</form>

<input type = "submit">이 클릭되면 action에 설정된 페이지로 값들을 전송한다

- method = "요청방식" GET, POST방식
 
GET 방식
- 웹브라우저의 주소창을 통해 값을 서버로 전달하는 방식 (식별가능)
- 보안이 되지 않는다
- 256자 이하의 소용량 문자열 데이터만 전송가능

POST 
- HTTP header를 통해 값을 서버로 전달하는 방식 (식별불가능)
- GET방식 보다 보안이 유리하다
- 256자 이상의 대용량 데이터를 전송할 수 있다

- action = "a.jsp"  //  , b.jsp, servlet-mapping명 : HTMP form Control의 값을 받는 페이지

- enctype = "전송방식" 
  : 파라메터 전송방식
       appication / x-www-form-urlencoded 이 기본으로 설정되어있다 (파일은 업로드 되지 않는다)
  : 파일 전송방식
       multipart/form-data
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>input</title>
</head>
<body>

	<form name="frm" action="test.jsp" method="get">
		<fieldset>
			<legend>input tag연습</legend>
			<!-- <input /> -->
			<legend>아이디</legend>
			<!-- readonly - 값전달 가능, disabled - 값전달 불가 //공통 : 편집불가능 -->
			<!-- <input type="text" name="id" size="20" maxlength="40" value="Back-end로 값전달 가능"
				readonly="readonly" /><br>
				
			<input type="text" name="id" size="20" maxlength="40" value="Back-end로 값전달 불가"
				disabled = "disabled" />  -->

			<input type="text" name="id" size="20" maxlength="40" placeholder="아이디"
				autofocus="autofocus" /> <input type="submit" />
		</fieldset>


	</form>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>input</title>
</head>
<body>

	<!-- http://localhost/html_prj/day0111/test.jsp?이름=값&이름=값     -->
	<!-- http://localhost/html_prj/day0111/test.jsp    URL -->
	<!-- ?이름=값&이름=값    GET방식의 QueryString -->
	<!-- 이름=값   (QueryString이란)Web Parameter(들이 묶인 것) -->
	<!-- html_prj/day0111/test.jsp    URI -->

	<form name="frm" method="get" action="test.jsp">
		<input /> <br> 
		
		<!-- Web은 이름이 같으면 배열이다 -->
		
		<label>text</label> 
		<input type="text"name="name" /> <br>
		<label>size, maxlength</label>
		<!-- size = "보여질크기" maxlength = "최대입력글자수"-->
		<input type="text" name="name1" size="5" maxlength="10" /> <br>
		<label>value, readonly</label>
		<!-- readonly = "readonly" 읽기전용,수정불가,back-end로 값전송 가능-->
		<input type="text" name="name2" value="읽기전용" readonly="readonly" /> <br>
		<label>value, disabled</label>
		<!-- disabled = "disabled 비활성화,수정불가,back-end로 값전송 불가능 -->
		<input type="text" name="name3" value="비사용화" disabled="disabled" /> <br>
		<label>autofocus, placeholder</label>
		<!-- autofocus 커서를위치 placeholder 초기값 -->
		<input type="text" name="name4" autofocus="autofocus"
			placeholder="사라질메세지" /> <br>

		<!-- input type = "passsword" 에서도 동일하게 사용된다 -->
		<!-- input type = "passsword" 사용자가 한글을 입력할 수 없다 -->
		<!-- input type = "passsword" 한글 사용법 : text를 복사해서 넣을 수 있다 -->
		<label>password</label> 
		<input type="password" name="pass"value="test" /> <br> 
		<label>placeholder</label>
		<!-- placeholder를 사용하면 (반향문자가 아닌)문자가 보여지고, 한글을 사용할 수 있다  -->
		<input type="password" name="pass1" placeholder="비밀번호" /> 
		<br> 
		<label>checkbox</label>
		<input type="checkbox" name="cb" value="전송할 값" />보여질 값 
		<br> 
		<label>checkboxgroup, checked</label>
		<!-- name 속성이 같으면 그룹으로 처리된다 -->
		<input type="checkbox" name="hobby" value="운동" />등산 
		<input type="checkbox" name="hobby" value="운동" checked="checked"/>낚시 
		<input type="checkbox" name="hobby" value="컴퓨터" />게임 
		<input type="checkbox" name="hobby" value="컴퓨터" checked="checked"/>코딩
		<br>

		<label>radio</label>
		<!-- name속성에 이름이 같아야 여러개 중 하나만 선택된다 : 그룹화 -->
		<input type="radio" name="gender" checked="checked"/>여자
		<input type="radio" name="gender"/>남자
		<br>

		<label>히든</label>
		<!-- 사용자에게 보여지지않는 Form Control -->
		<input type="hidden" name="hid" value="숨겨서 넘길 값"/><br>

		<label>파일</label>
		<!-- 사용자가 선택한 파일이 server 로 upload 되려면, enctype="multpark/form-data" 이어야 한다 -->
		<input type="file" name="upfile"/><br>
		
		<label>이미지</label>
		<img src="../day0107/images/work.jpg" title="img태그" width="80">
		<input type="image" src="../day0107/images/work.jpg" title="image태그" width="80"/>
		<br>

		<!-- form태그 안에 있을 때만 정해진 일을 수행한다 -->
		<label>버튼모양</label>
		<!-- label을 가지고 있지 않고 모양만제공, JavaScript에서 전송제어 -->
		<input type="button"/>
		<br>
		<label>reset</label>
		<!-- HTML이 처음 로딩될 때의 상태로 돌린다 (입력값들이 모두 사라진다) -->
		<input type="reset"/>
		<br>
		<label>submit</label>
		<!-- action속성에 설정된 back-end 페이지로 입력값을 전송한다 -->
		<input type="submit"/>
		<br>

		<!-- 브라우저마다 defualt label이 달라서 value로 맞춰준다 -->
		<br>
		<input type="submit" value="전송" />
	</form>

</body>
</html>

 

 

저작자표시 비영리 변경금지

'Web_Front-end > HTML' 카테고리의 다른 글

[HTML] 2021.01.11 DAY_53 태그사용5. _ HTML5에 추가된 Form Control, 영역태그  (0) 2021.01.11
[HTML] 2021.01.08. DAY_52 글자태그_marquee 연습  (0) 2021.01.08
[HTML] 2021.01.08. DAY_52 태그사용3. _ 테이블 - 표(table) 생성, 연습, 태그 속성  (0) 2021.01.08
[HTML] 2021.01.07. day_51 태그복합사용 연습) 이미지 + 링크태그 사용  (0) 2021.01.07
[HTML] 2021.01.07. day_51 태그사용 2. _ 이미지, 링크 태그, frame(frame, iframe)  (0) 2021.01.07

관련글

댓글 0

티스토리툴바