[HTML] <form>, 다양한 input type, 식별자(id, class, name), <a> vs <form>

식별자

id	고유한 식별을 목적으로 하는 경우 사용	페이지에서 하나의 요소만 지정 가능
class	재사용을 목적으로 하는 경우 사용	여러 개의 요소에 지정 가능
name	form 컨트롤 요소의 값(value)을 서버로 전송하기 위해 필요한 속성	여러 개의 요소에 지정 가능

id : javascript에서 접근 목적. 현 페이지에서 한 개만이 유효 == Javascript

class : js에서도 접근이 가능하지만, 일단은 css에서 디자인적인 요소인 경우가 많다. == css 쪽에서 주로 사용, 현 페이지에서 다중으로 설정이 가능하다.

name : 값을 전달하기 위한 목적을 가지고 있는 경우가 많다. 다중 설정이 가능하다. 즉, A페이지에서 B페이지로 이동하는 경우 값을 넘겨준다.

---

<a> vs <form>

두 태그의 공통점은 web페이지에서 다른 web페이지로 이동하는 기능이다.

이 두 가지 태그의 차이점은 태그의 경우 단순한 페이지 이동이지만, <form>태그의 경우 type에 따라 사용자에게 입력을 받고, 식별자 name을 통해서 입력받은 값을 서버로 넘겨줄 수 있다.

 

<form> : 값을 가지고 묶어서 보낼때 사용.

목적

1)이동의 목적이 강하다

2)name으로 되어있는 resource(자원) 값들을 전달한다.

3)submit버튼으로 이동하게 된다.

속성

• action : form이 전송되는 서버 url 또는 html 링크
• input type : 이벤트
• method : 전송 방법 설정. get, post
• submit : form 하나당 무조건 1개만 가능하며, form에 입력한 resource(자원) 값 들을 action에 해당하는 url로 전송

---

input type

text : 문자열을 입력받을 수 있는 창

-size : text의 size

-placeholder : 텍스트필드에 투명하게 글자를 표시

ID:<input type="text" value="" title="여기에 id 기입" size="10" placeholder="id기입" name="id">

ID:

---

password : 실제 비밀번호 입력하는것 처럼 문자를 숨겨서 표시

PW:<input type="password" size="10" title="pw입력" name="pwd">

PW:

---

textarea : 길이가 큰 문자열을 입력받을 수 있는 공간

<textarea rows="10" cols="30">입력해보세요</textarea>

입력해보세요

---

number : 숫자를 컨트롤할 수 있다.

-max : 최댓값

-min : 최솟값

number:<input type="number" max="5" min="1">

number:

---

date : 달력 표시되며, 날짜 선택(년, 월, 일) 가능

date:<input type="date">

date:

---

color : 컬러 팔레트 생성, 컬러를 상세하게 조정할 수 있다.

color:<input type="color" value="#ff0000">

color:

---

range : 범위의 값을 세로 스크롤로 설정할 수 있다.

max : 최댓값

main : 최솟값

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

range:

---

search : 검색어를 입력할 수 있는 텍스트 필드

search:<input type="search">

search:

---

button : 이벤트를 발생시킬 수 있는 버튼 (하나의 name으로 묶어줘서 사용해야 한다)

button:<input type="button" value="btn">

button:

---

checkbox : 여러 개를 고를 수 있는 체크박스

<input type="checkbox" value="패션">패션<br>
<input type="checkbox" value="음악">음악<br>
<input type="checkbox" value="게임">게임<br>

패션 음악 게임

---

radio : 라디오 버튼(radio button)을 표시. 오직 하나의 라디오 버튼만 선택할 수 있다. (하나의 name으로 묶어줘서 사용해야 한다)

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

Benz Audi BMW

---

select : 1개를 고를 수 있는 기능, multiple 옵션을 추가해서 다수를 고르게 할 수 있다.

<select multiple="multiple">
<option value="apple">사과</option>
<option value="pear">배</option>
<option value="banana">바나나</option>
</select>

사과 배 바나나