Daily coding

HTML : Tags - form & input 폼과 인풋 태그 본문

Front-end/Client

HTML : Tags - form & input 폼과 인풋 태그

sunnnkim 2020. 1. 3. 18:37

 

form

event resource와 같이 많이 사용
입력 데이터 등을 전송할 수 있다

 

 

< 구조 >

<form action = "이동을 하고 싶은 URL 또는 파일">

 

 


id : #, 현재 페이지에서 1개만을 인식. javaScript(=JQuery) 에서 많이 사용
class : . , 다중 인식. CSS(디자인), JavaScript(=JQuery)
name : link용, 값을 전송할 때 변수의 역할. 데이터를 jsp파일 등으로 넘겨줄 수 있고 디비와 연결하여 사용할 수 있다.

 

 

<input type ="submit" value ="클릭">

type ="submit" : submit 버튼을 생성한다 
value : 특정 입력 타입을 만들고 안에 들어갈 텍스트 입력 

submit : 이동, form하나당 submit은 하나만 존재 
중간에는 입력 리소스들 존재

 

 

* input태그 
1. button(submit)
2. checkBox
3. radioButton
4. textField

5. number : 숫자
6. date : 달력 포맷

7. range : 범위 설정해서 지정할 수 있음

8. search : 검색기능

9. color 

및 기타 등등 툴바 

 

------------

1. textArea

2. select

 

 

 

input 과 form은 반드시 연결 되어 있을 필요는 없음

(종속적인 것-> 리셋/서밋은 form안에 들어있어야 기능이 수행된다.)
예 > button은 독립적으로 기능을 수행하는 일반적인 버튼,

       submit은 페이지 이동 등의 기능을 수행하는 종속적인 버튼

 

 

1. button 

< ​input type="button" value ="button" >

- value : 값을 jsp로 넘길 때의 변수명

 

1-1. submit / reset

<input type ="submit" value ="클릭">

<input type="reset" value="초기화" > ----> form을 모두 처음 상태로 만드는 버튼

 

2. checkBox 

<input type="checkbox" name="job" value="패션">패션

<input type="checkbox" name="job" value="음악">음악

<input type="checkbox" name="job" value="게임">게임

- name 으로 input으로 묶고, 각각의 값들을 체크박스로 표시

- 다중 선택/선택없음이 가능하다

 


3. radioButton

<input type="radio" name="car" value="벤츠">벤츠

<input type="radio" name="car" value="BMW" checked ="checked">BMW

<input type="radio" name="car" value="아우디">아우디

 

- name으로 라디오버튼들을 하나로 묶고 그 중 1개만 선택함

- checked="checked" 속성을 통해 기본 선택을 지정할 수 있다

 


4. textField

<input type="text" name="id" value="" size="12">

- 글자 입력하는 칸 생성

<input type="password" name="pwd" size="12">

- 패스워드 입력하는 텍스트 필드로, 모든 문자열이 *으로 표시됨

 

 

5. number : 숫자 

< input type="number" name="num" max ="5" min ="1" >

- 최대/최소 범위 안에서 숫자를 선택할 수 있음

 


6. date : 달력 포맷

<input type="date" name="date">

- 년월일을 설정할 수 있음 (특정 날짜를 입력하거나 버튼을 누르면 달력이 화면에 표시됨)

 

 

7. range : 범위 설정해서 지정할 수 있음

<input type="range" max="10" min="0" name="range">

- 특정 값의 범위를 막대바를 통해 표현하도록 설정

 

8. search : 검색기능

<input type="search" name="search">

- 검색창을 화면에 표시

 

 

9. color

<input type="color" name="color">

- 색을 지정할 수 있도록 컬러 패널이 나옴

 

* 그 외

- table 넣을 수 있음 : 글자 칸이나 정렬 맞추기 위해 border가 없는 테이블이 사용되기도 함

 

<form>에서 사용할 수 있는 태그

1. select : 콤보박스를 만들어 줌

 

<select name="cars">

          <option value="볼보">볼보 <닫기>

          <option value="사브">사브 <닫기>

          <option value="피아트">피아트 <닫기>

---> 이렇게 하면 콤보박스에서 데이터 1개를 선택할 수 있다

 

select  multiple = "multiple" : 여러개 중복선택함 (데이터 받을때는 반드시 배열로 받아야함

<select name="cars" multiple="multiple"> 

위의 코드처럼 사용할 수 있음

 

2. textArea

<textarea rows="20" cols="30">

- 텍스트를 입력할 수 있는 넓은 창 표시 

 

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

link -> anchor <a href="이동하고 싶은 파일 또는 URL">표시 문자열 또는 이미지</a><br>
form -> 링크로 이동함<br>
<!-- * 
	form
		event resource와 같이 많이 사용
		입력 데이터 등을 전송할 수 있다
		
	id : #, 현재 페이지에서 1개만을 인식. javaScript(=JQuery)에서 많이 사용
	class : . , 다중 인식. CSS(디자인), JavaScript(=JQuery)
	name : link용, 값을 전송할 때 변수의 역할. 데이터를 jsp파일 등으로 넘겨줄 수 있고 디비와 연결하여 사용할 수 있다.

<form action="이동을 하고 싶은 URL 또는 파일">
submit : 이동, form하나당 submit은 하나만 존재 <br>
중간에는 입력 리소스들 존재
	<input type="submit" value="클릭">
	type="submit" : submit 버튼을 생성한다
	value : 특정 입력 타입을 만들고 안에 들어갈 텍스트 입력
	
</form>

-->

<h3>index.html</h3>
<form action="NewFile.html">
	<input type="submit" value="클릭">
</form>
<br><br>
<!-- input태그 
1. button(submit)
2. checkBox
3. radioButton
4. textField
및 기타 등등 툴바 
-->



<form action="NewFile.html">
name: <input type="text" value="여기에 입력" size="12">
<br>
age: <input type="text" value="" size="10">
<br>
<input type="submit" value="submit">
<input type="button" value="button">
<input type="reset" value="초기화">
</form>
<br><br>

input과 form 은 반드시 연결되있을 필요는 없음(종속적인 것-리셋/서밋은 form안에 들어있어야 기능이 수행된다.)<br>
또한, button은 독립적으로 기능을 수행하는 일반적인 버튼이고, submit은 페이지 이동 등의 기능을 수행하는 종속적인 버튼
name: <input type="text" value="여기에 입력" size="12">
<input type="submit" value="이동">
<input type="reset" value="초기화">

<br><br>
<br><br>
로그인 화면<br>
<form action="NewFile.jsp">
	id: <input type="text" name="id" value="" size="12">
	<br>
	password: <input type="password" name="pwd" size="12">
	<br>
	<input type="submit" value="이동">
</form>
<br><br><br>


form 안에 테이블 넣어서 구조 짜기 <br>
<form action="NewFile.jsp">
<table border="1">
<tr align="right">
	<td>id:</td>
	<td>
		<input type="text" name="id" value="" size="12">
	</td>
</tr>
<tr align="right">
	<td>password:</td>

	<td>
		<input type="password" name="pwd" size="12">
	</td>
</tr>
<tr>
	<td colspan="2">
		<input type="submit" value="이동">
	</td>
<tr>
</table>	
</form>

<br><br><br><br><br><br>

<!-- form - html 5
number : 숫자
date : 달력 포맷



-->
<form action="NewFile1.jsp">
number: <input type="number" name="num" max="5" min="1">
<br>
date: <input type="date" name="date">
<br>
color: <input type="color" name="color">
<br>
range: <input type="range" max="10" min="0" name="range">
<br>
search: <input type="search" name="search">
<br>
<input type="submit" value="선택">

</form>

<br><br><br>

CheckBox
<form action="NewFile2.jsp">
<input type="checkbox" name="job" value="패션">패션<br>
<input type="checkbox" name="job" value="음악">음악<br>
<input type="checkbox" name="job" value="게임">게임<br>
<input type="submit" value="이동">
</form>

<br><br><br>


RadioButton<br>
<input type="radio" name="car" value="벤츠">벤츠<br>
<input type="radio" name="car" value="BMW" checked="checked">BMW<br>
<input type="radio" name="car" value="아우디">아우디<br>

<br><br><br>


select  = choice, comboBox (swing)<br><br>
<select name="cars">
	<option value="볼보">Volvo</option>
	<option value="사브">Saab</option>
	<option value="피아트">Fiat</option>
	<option value="프리우스">Prius</option>
</select>
select  multiple = "multiple" : 여러개 중복선택함 (데이터 받을떄는 반드시 배열로 받아야함)<br><br>
<select name="cars" multiple="multiple">
	<option value="볼보">Volvo</option>
	<option value="사브">Saab</option>
	<option value="피아트">Fiat</option>
	<option value="프리우스">Prius</option>
</select>
<br><br><br>



textArea <br>
<textarea rows="20" cols="30">초기값 설정하고 싶을 때</textarea>
<br><br><br>	

button Tag 비교하기 : input tag / button tag<br>
input<br>
<input type="button" value="버튼"><br>
button<br>
<button type="button" onclick="alert('클릭했음')">버튼</button>




</body>
</html>

'Front-end > Client' 카테고리의 다른 글

CSS : CSS 기초 및 방식  (0) 2020.01.09
HTML : jsp 파일로 자바 콘솔에 출력하기  (0) 2020.01.03
HTML : Tags - Video 비디오  (0) 2020.01.03
웹 - 아파치 톰캣 설정방법  (0) 2020.01.03
HTML : Tags - iframe i프레임  (0) 2020.01.03
'Front-end/Client' Related Articles more