프론트엔드1-3. 기본태그(form과 input, 그 외 태그들)

[form 태그]

• 사용자로부터 입력을 받을 수 있는 HTML 입력 폼(form)을 정의할 때 사용한다.
•  폼과 관련된 대부분의 작업들은 정보를 저장하거나 검색하거나 수정하는 일들인데 이런 작업은 모두 데이터베이스를 기반으로 한다. 

 

 

<form> 태그의 속성

method	사용자가 입력한 내용을 서버 쪽 프로그램으로 어떻게 넘겨줄 것인지 지정한다. method에서 사용할 수 있는 속성값은 get과 post이다.
	get: 데이터를 256~4,096byte까지만 서버로 넘길 수 있다. 주소에 데이터를 직접 입력해 전달한다.
	post: 별도의 방법을 사용해 데이터를 해당 주소로 전달
name	자바스크립트로 폼을 제어할 때 사용할 폼의 이름을 지정한다.
action	<form> 태그 안의 내용을 처리해 줄 서버 프로그램을 지정한다.
target	action 속성에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에서 연다.

---

GET방식과 POST방식

 

<form method="get"> <input type="text", name="search">        <input type="submit"> </form>

<form method="post"> <input type="text", name="search">        <input type="submit"> </form>

 

1) GET

• 클라이언트에서 서버로 어떠한 정보를 요청하기 위해 사용되는 메서드(예, 게시판의 게시물 조회)
• get을 통한 요청은 URL 주소 끝에 파라미터로 포함되어 전송되고, 이부분을 쿼리 스트링(query string)이라고 부른다. 
• URL 끝에 "?"을 붙이고 그다음 변수명1=값1&변수명2=값2... 형식으로 이어 붙이면 된다. 
• 서버는 변수명1(name1)과 변수명2(name2)라는 파라미터명으로 각각 값1(value1)과 값2(value2)의 파라미터값을 전달받을 수있다. 
• get요청은 파라미터에 노출되기 때문에 중요한 정보를 다루면 안된다.
• get은 데이터를 요청할 때만 사용된다.

<a href="board.jsp?username=홍길동&num=250&userid=hong/">서버로 정보 보내기</a>

 

-> 현재 jsp파일이 없기 때문에 404 오류가 뜬다. username은 변수 홍길동은 데이터

 

2) POST

• 클라이언트에서 서버로 리소스를 생성하거나 업데이트하기 위해 데이터를 보낼때 사용되는 메서드(예, 게시판에 게시글 작성) 
• get에서 url의 파라미터로 보냈던  변수명1=값1&변수명2=값2... 가 body에 담겨 보내진다고 생각하면 된다.
• 길이 제한이 따로 없어 용량이 큰 데이터를 보낼 때 사용하거나 get처럼 데이터가 외부적으로 드러나지 않아 보안이 필요한 부분에 사용된다. 
• POST를 통한 데이터 전송은 보통 HTML form을 통해 서버로 전송되기 때문에 꼭 form태그가 있어야 한다. 

<form method="post" action="aaaa.jsp">
 <!-- input태그와 submit 태그가 안에 있다-->
</form>

 

-> get방식과 post방식은 같이 사용할 수도 있다.

<form method="post" action="aaaa.jsp?=010-3434-1233">
	<!-- input 태그와 submit 태그가 안에 있다.-->
</form>

 

---

[input 태그]

• form태그 안에서 추가되는 입력 요소 중 가장 중요한 태그로 사용자로부터 정보를 받아들이는 용도로 사용된다. 
• input태그의 type이라는 속성을 사용해 입력 양식을 여러가지로 변경하여 사용된다. 
• input태그는 닫는태그가 없고 태그 안에 type속성과 name속성 value속성이 있다. 

 

type	name	value
입력 태그의 유형	서버로 전달되는 이름(사용자 임의 지정)	입력 태그의 초기값으로 사용자가 변경 가능

 

---

input type의 유형

 

1. type = “text”, “password”

<input type = “text”>	<input type = “password”>
한 줄짜리 텍스트 입력 필드	비밀번호 입력란
주로 아이디나 이름, 주소 등 텍스트 입력	사용자가 입력하는 내용이 ‘*’로 표시된다.

 

<form>
아이디 : <input type="text" name="userid" value="아이디를 입력하세요."/>
비밀번호 : <input type="password" name="userpwd"/>
</form>

• name을 가지고 DB조희를 하기 때문에 name은 필수이다.
• value는 텍스트 필드 요소가 화면에 표시될 때 텍스트 필드 부분에 보여주는 내용이다.

 

<form method="get" action="aaaa.jsp?">일때 아이디 비밀번호를 적고 클릭하게 되면 저렇게 주소창에 name이 뜨게 된다.

 

 

<form method="post" action="aaaa.jsp?">일때는 주소창에 뜨지 않는다.

---

<input> 태그의 다양한 속성

 

1) placeholder

• 텍스트 필드 요소가 화면에 표시될 때 텍스트 필드 부분에 보여주는 내용
• 필드를 클릭하면 사라짐

<form>
아이디 : <input type="text" name="userid" placeholder="아이디를 입력하세요."/>
비밀번호 : <input type="password" name="userpwd"/>
</form>

2) maxlength와 size

• maxlength 텍스트 필드와 비밀번호 필드에 입력할 수 있는 최대 문자 수
• size: 텍스트와 비밀번호 필드의 길이를 지정. 화면에 몇 글자가 보이도록 할 것인지 지정

<form>
아이디 : <input type="text" name="userid" maxlength="10" size="5"/>
비밀번호 : <input type="password" name="userpwd"/>
</form>

3) readonly와 disabled

• readonly: 내용을 보기만하고 입력하지 못하게 함
• disabled: 비활성화 상태
• 둘 다 입력할 수 없다. 

<form>
아이디 : <input type="text" name="userid" placeholder="아이디를 입력하세요" value="악어" size="5" readonly/>
	
이름 : <input type="text" name="username" value="토끼" disabled/>
</form>

 

4) required

• 폼 데이터가 서버로 제출(submit)되기 전 반드시 채워져 있어야 하는 입력 필드
• required 속성이 제대로 동작하는 <input> 요소의 type 속성값
• - checkbox, date, email, file, number, password, pickers, radio, search, tel, text, url

<form>
아이디 : <input type="text" name="userid" placeholder="아이디를 입력하세요" maxlength="20" size="20" required/>
이름 : <input type="text" name="username" value="토끼" disabled/>
비밀번호 : <input type="password" name="userpwd"/>
</form>

---

2. input type=”file”

<input type="file" name="filename"/>

파일첨부

3. type = “radio”, “checkbox”

<input type=”radio”>	여러 항목 중 하나만 선택할 때
<input type=”checkbox”>	여러 항목 중 둘 이상을 선택할 때

<form>
	체크박스 : <input type="checkbox" name="hobby" value="basketball"/> basketball
	           <input type="checkbox" name="hobby" value="soccer"/> soccer
	           <input type="checkbox" name="hobby" value="baseball" checked/> baseball<br/>
               
	라디오버튼 : <input type="radio" name="email" value="yes" checked/> I agree 
	      		 <input type="radio" name="email" value="yes"> I don't agree<br/>
</form>

 

라디오 버튼, 체크 박스에서 사용하는 속성

name	라디오 버튼이나 체크박스가 여러 개 있으면, 폼에서 라디오버튼이나 체크박스를 구분하기 위해 이름을 지정한다. 라디오 버튼은 여러 개중에서 한 개만 선택하는 것이어서관련있는 그룹끼리는 name을 동일하게 만든다.
value	선택한 라디오 버튼이나 체크박스를 서버로 알려줄 때 넘길 값을 지정한다. 필수 속성
checked	화면에 표시될 기본으로 선택해 놓을 항목

 

4. type =”button”, “submit”, “image", "reset + <button>, 

<input type=”button”>	기능없이 버튼 형태만 삽입한다. 자바스크립트가 있어야 실행된다.
<input type=”submit”>	사용자 입력 내용을 서버로 전송한다.
<input type=”img”>	submit 버튼 대신 이미지가 submit버튼을 대신한다.
<input type="reset">	사용자 입력 내용 전부 삭제한다.
<button>	submit과 동일한 기능을 한다. 화면 낭독기에서 버튼임을 정확히 전달할 수 있다.

<!-- action: form의 submit이 발생하면 실행된 파일명 -->
<form action="aaaa.jsp"> <!—-파일이 없으면 404 오류!-->

	<input type="button" value="등록" title="input의 타입인 button"/>
	<input type="submit" value="등록" title="input의 타입인 submit"/>
	<button title="submit과 동일한 button">등록</button>
	<input type="image" src="../img/tiny.png">
    <input type="reset" value="다시쓰기"><br/>
    
</form>

• value 속성을 이용해서 버튼 표시 내용을 지정한다.
• action이 있어야 button을 누르면 해당 파일이 실행된다.

 

5. type = “date”, "datetime-local" “month”, “week”

<input type=”date”> <input type="datetime-local"> <input type=”month”><intput type=”week”>

달력 이용해 날짜 입력

</form>
	 date : <input type="date" name="date"/><br/>
	 datetime-local : <input type="datetime-local" name="date2"/><br/>
	 month : <input type="month" name="month"><br/>
	 week : <input type="week" name="week"><br/>
</form>

->jsp에 들어가는 정보들

http://localhost:9090/webApp/html5_css3/aaaa.jsp?date=2022-02-02&date2=2022-02-25T23%3A27&month=2022-07&week=2022-W05

 

6. type = "color", "number" “range”

<input type="color">	색상 입력 필드
<input type=”number”>	숫자 입력 필드. 브라우저에 따라 스핀 박스로 표시됨
<input type=”range”>	숫자 입력 필드. 슬라이드 막대를 이용해 숫자 입력

 

<form>
	color : <input type="color" name="color"/><br/>
	number : <input type="number" name="num" min="10" max="20" step="2"><br/> <!-- 2씩 증가 -->
	range : <input type="range" name="range" min="0" max="10" step="1" value="2"/>
</form>

 

숫자 입력 필드에서 사용하는 속성

 

 

---

[그 외의 form에서 사용하는 태그]

1. <textarea>

• 여러줄의 텍스트 입력
• 게시판 글 입력 양식, 사용자 약관 등

<form>
여러줄의 문자 입력 : <textarea name="memo" cols="10" rows="3"></textarea> <!--10칸 3줄-->
</form>

 

<textarea>태그의 속성

cols	텍스트 영역의 가로 너비
rows	텍스트 영역의 세로 길이 지정한 숫자보다 줄 개수가 많아지면 스크롤막대 생성

 

2. <select>, <option>

• 여러 옵션 중에서 선택 : 드롭다운 목록
• 공간을 최소한으로 사용하면서 여러 옵션 표시 가능

<form>
    리스트박스 : 
	<select name="Language" size="5" multiple>
		<option value="java">자바</option>
		<option>DB</option>
		<option>알고리즘</option>
		<option>HTML</option>
		<option selected>CSS</option>
		<option>js</option>
	</select>
 </form>

 

<select>태그의 속성

 

size	화면에 표시할 드롭다운 항목의 개수를 지정한다.
multiple	드롭다운 목록에서 둘 이상의 항목을 선택하게 해준다. ctrl을 누르고 선택할 수 있다.

 

<option>태그의 속성

 

value	해당 항목을 선택할 때 서버로 넘겨줄 값을 지정한다. value값이 없다면 사용자가 보는 값(option 사이의 값)이 넘겨진다.
selected	드롭다운 메뉴를 삽입할 때 기본적으로 선택해서 보여줄 항목을 지정한다. 선택을 안해도 기본적으로 선택되서 서버로 넘겨진다.

 

-> CSS는 기본적으로 선택이 되어 있다.

-> 자바는 value가 있어서 value의 값인 java가 서버로 넘어가고, 

-> 알고리즘은 option사이에 있는 값이 서버로 넘어간다.

http://localhost:9090/webApp/html5_css3/aaaa.jsp?Language=java&Language=알고리즘&Language=CSS

 

3. <outgroup>

• <select>와 <option> 으로 만든 드롭다운 목록을 그룹으로 만들 수 있다. 
• <label>을 기준으로 나눈다. 

 <form>
    리스트 그룹만들기 :
 	<select name ="lang">
 		<optgroup label="프론트엔드">
	 		<option>js</option>
			<option>HTML</option>
			<option>CSS</option>
 		</optgroup>
 		<optgroup label="백엔드">
 			<option>DB</option>
			<option>자바</option>
 		</optgroup>
 	</select>
</form>