[HTML] Form 사용자로부터 입력받거나 선택할때, 입력태그, Button

Form

form 입력하거나 선택할때 쓰는것 (block태그)

- 사용자로부터 입력받거나 선택할 때 사용
- 대부분이 서버로 전송하는 데이터를 입력할 양식

- form 태그 영역 내의 것들을 서버로 전송(parmeter라고 하는것)

- form 태그 영역 내에는 input 태그들 사용 

<form action ="요청할 URL주소" method = "요청할 메서드 형식">

</form>

ex) <form action="./insert" method="post"></form>

 

post 랑 get태그 모두 가능하게 사용하는건 form태그이다.

-method 속성은 생략 가능(Default 는 get) 
-get 또는 post로 변경 가능 
-form태그 영역 내에는 input 태그를 사용

 

 

입력태그

input -> 주로 form태그 내에서 사용
- form태그 없이 사용도 가능 (JavaScript와 같이 사용)
- 사용자로부터 데이터를 입력 받는 태그
- type이라는 속성값에 따라서 입력양식이 달라짐

1. input 태그 (그중 input태그는 inline태그) 
<input type="값">

  1) type의 종류 
    -text: 짧은 text에 주로 사용
    -password: 비밀번호 사용할 때 (입력되는 데이터는 *로 표시 )
    -file: 파일 업로드시 파일을 선택
    -date: 날짜 입력 또는 선택
    -number : text와 비슷, 숫자만 입력 (키보드에서 문자 안받음)
    -email: 이메일 양식으로 입력
    -tel: 전화번호 양식으로 입력
    -hidden: 사용자에게는 보이지 않고 서버로 전송

<input type="hidden" readonly="readonly" name="bookNumber" value="${dto.bookNumber}">

작성자 같은거 안보여도 되는데 hidden으로 server로 넘어가긴 해야함

 

     Input태그는 FORM태그 안에서사용해야함 

 

 

radio 랑 textarea 추가

 

radio : 여러개 중에서 하나를 선택할 때 

         그룹별로 name 속성의 값을 일치시켜야함

         server로 전송 시 입력 할 수 없으니 개발자가 미리 value에다가 값을 대입시켜줌

checkbox : 여러개 중에서 다중 선택 

              나머지는 Radio와 거의 같음

 

2. 비교적 긴 글을 입력할 때 

textarea 태그를 사용함

<textarea rows="" cols=""></textarea>

 

 

select 

여러개 중에서 하나를 선택

<select name="">

<option value="">값1</option>

<option value="">값2</option>

<option value="">값3</option>

</select>

 

4. 공통속성 
  1) value :  input태그에 입력된 값이 저장되는 속성이 value이다
               파라미터의 값으로 서버로 전송
               파라미터값은 VALUE속성으로 넘어감 
  2) name : 파라미터의 이름이 됨

(쓰는 순서 상관없음)
<input type="text" value="아이유" name="id" > => url? id=아이유

 

++

 

<fieldset>
<legend>ID</legend>
<input type="text" name="id" value="${cookie.remember.value}">
</fieldset>

 3) readonly : 입력(선택) 불가, 읽기만 가능, 서버로 전송 가능
BookNumber<input type="text" readonly="readonly" name="bookNumber" value="${dto.bookNumber}">

이렇게도 가능 >>  BookNumber</input type="text" readonly name="booknumber" value="${dto.booknumber}">
 

 

4) disabled : 입력 (선택) 불가, 읽기만 가능, 서버로 전송 불가
                 ex) 작성자

5. 입력 태그별 속성
 1) 사용자 타이핑하는 태그
   a. placeholder : 입력양식에 hint 제공
https://www.codingfactory.net/11592 

Button

button 을 생성하는 방법 4~6 가지

1. input 태그의 type속성으로 button  
- 아무런 기능이 없는 순수한 button
- 나중에 기능을 추가하려면 javaScript로 같이 사용해야함
- value 속성의 값이 버튼의 이름

2. input 태그의 type 속성으로 reset 
- 입력 form에 입력된 내용을 초기화 하는 버튼

3. input 태그의 type속성으로 submit
- 입력된 내용을 form 태그의 action 의 url로 요청을 발생
- submit이라는 이벤트가 내장되어있음
- value 속성의 값이 버튼의 이름

 

4. button 태그 
<button>버튼이름 </button> 
속성의 값을 변경해서 1,2,3 기능을 전부 가질  있음
type : button, reset, submit

5. a 태그
 -a 태그 또는 일반태그 css를 이용해서 버튼 처럼 보이게함
 - 효과를 주기 위해 JavaScript를 같이 사용

6. Input태그의 type속성으로 image
<input type="image" scr="이미지경로" value="버튼의 이름">

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

form 태그안에 button들이 있으면 각각 고유의 기능이 실행
form 태그 바깥에 button들이 있으면 아무런 기능이 없는 button이 됨 
javaScript를 사용 

 

1. input 태그의 type속성으로 button  의 경우

어떨때 사용하나?

예를 들면 인터넷 쇼핑으로 장바구니에

상품명  상품갯수    가격        합계       

 모자         1        20,000      20,000     확인 버튼

 

여기서 2개를 사고 싶을때 갯수를 2 개로 고치고 확인 버튼을

누르면 바로 합계는 40,000원으로 변하겠지

 

 

상품명  상품갯수    가격        합계

 모자         2        20,000      40,000

 

이럴때 쓰이는거라고 생각하면 된다.