HTML - web form , 폼 , input

* form , 폼

웹 페이지에서, 사용자에게 입력을 받기 위한 양식을 폼이라고 합니다. 예를들어 회원가입, 로그인, 검색 등.... 에서 폼을 사용하여 사용자의 입력을 받게 됩니다.

폼을 만들기 위한 다양한 태그들이 존재하며, 그러한 태그들은 폼 요소(form element) 라고 합니다. 

 

 

*텍스트 입력, 제출 버튼 , 초기화 버튼

전체를 <form> 태그로 감싸고, 안에 input요소를 넣어줍니다. 

 

 

text : 텍스트 입력칸입니다.

submit : 제출버튼이 등장합니다. (하지만 여기서 버튼은 form 태그에 action을 지정하지 않아서 기능을 하지 않습니다.)

password : 는 ***와같이 입력한 문자를 가려주게 됩니다.

reset : 입력된 양식을 처음 상태로 초기화합니다.

paceholder : input 태그에 사용자에게 도움을 주기위한 짧은 도움말? 을 출력하는 속성입니다.

<form name="login" method="get">
ID : <input type="text" size = "15" value="" placeholder= "아이디 입력">
<br>
password : <input type = "password" size = "15" value="" placeholder= "비밀번호 입력"> <br>
<input type="submit" value="로그인"> <br>
<input type="reset">
</form>

ID :
password :

 

<form>태그의 속성

action, method, name, target등이 있습니다.

<form action = "form의 data가 전송되는 백엔드 url" 
method = "GET / POST (전송 방식)"
name = "폼의 이름(자바스크립트에서 사용될)"
target = "데이터를 출력할 윈도우 이름">

..................... 여러가지 input 요소들...................

</form>

 

---

 

 

* 체크박스, 라디오 (checkbox, radio)

 

checkbox , radio : 체크박스, 라디오 버튼입니다. (체크박스는 중복체크가능, 라디오 버튼은 단일체크만 가능)

 

 

<div>
<input type="checkbox" value="체크박스" />체크박스1 
<input type="checkbox" value="체크박스2" />체크박스2
</div>
<div>
<input name="라디오" type="radio" value="라디오1" />라디오버튼1 
<input name="라디오" type="radio" value="라디오2" />라디오버튼2
</div>

체크박스1 체크박스2

라디오버튼1 라디오버튼2  (같은 name을 갖는 라디오버튼중에는 하나만 체크가 가능)

 

 

---

 

* 컬러 다이어로그 (color dialog)

 

색상창을 불러와 색깔을 입력할 수 있습니다.

 

<input type="color" name = "color_input" > 색입력

색입력

 

 

---

 

 

* 긴 텍스트 입력, 여러줄의 텍스트 입력 Text area

 

여러줄의 텍스트를 입력할수 있습니다. cols와 rows로 크기를 조절합니다.

 

<textarea cols = "70" rows="70"> 
  </textarea> 
  <input type="submit"  value="제출하기">

 

 

 

 

---

* 드롭박스 , datalist 

선택사항이 제공되는 텍스트 입력 박스입니다.

input태그의 list속성값과 datalist태그의 id값을 일치시켜야합니다.

<input = "datalist" list = "countries">
<datalist id = "countries">
  <option value="서울">
    <option value="부산">
      <option value="대구">
</datalist>
</input>

*한국의 대도시 : 

 

 

 

* 콤보박스 , Select

드롭박스와 다른점은 텍스트를 직접 입력은 불가능하고, 선택만 가능합니다.

select 태그로 감싸고, option태그를 통해 항목을 넣습니다. 이때 selected속성을 사용하면 최초에 그 항목에 선택된 상태로 나타납니다.

<select name="phone">
<option value="1"> 아이폰X</option>
<option value="2" selected> 선택해주세요</option>
<option value="3"> 갤럭시노트 10</option>
</select>

핸드폰을 선택하세요 :

아이폰X 선택해주세요 갤럭시노트 10

 

---

 

* 라벨 label

 

로그인 양식을 만드는 첫번째 예제에서, 텍스트 입력박스 앞의 ID: , 그리고 password : 와 같이 어떠한 항목을 넣는지 설명해주는 단어를 caption이라고 한다. 첫번째 예제에서는 라벨을 사용하지 않았지만, 라벨로 묶어주는것이 편리하다. 

그리고 라벨로 처리된 체크박스는, "체크박스1"이라는 텍스트, 또는 "체크박스2"라는 텍스트를 클릭해도 체크가된다.

체크박스1 체크박스2

<label>
<input type="checkbox" value="체크박스" />체크박스1 
<input type="checkbox" value="체크박스2" />체크박스2
</label>

 

 

 

---

 

 

* 시간 및 날짜 입력

 

 

화살표를 클릭하게 되면 켈린더모양이 펼쳐지고, 거기서 날짜를 선택할 수 있도록 하는 기능이다.

type 을 바꿔주면 입력 양식도 달라진다.

month, date, week, time 등이 있다.

 

<input type="month">

 

 

---

 

 

*스핀 버튼 (number) , 슬라이드 버튼 (range)

 

 

스핀버튼 (number)은 min과 max로 최저, 최고에 대한 limit을 걸 수 있습니다. 그리고 step에 따라서 화살표를 클릭시 증가 , 감소할 수를 정합니다.

슬라이드버튼 (range)도 비슷하지만, step속성이 없습니다.

재생 할 음악 번호 : <input type="number" min="0.0" max="100" step = "1">  번 <br>

볼륨 : <input type="range" min="0" max="50" list="volume">

 

재생 할 음악 번호 :

번
볼륨 :

 

 

*유효성 검사를 해주는 텍스트 입력

이메일은 기본적으로 id + @ + 도메인 으로 이루어진다. input type을 email로 하고 골뱅이를 빠트려서 입력하게되면

에러메시지가 나타난다. 입력된 텍스트가 유효한지 유효성 검사를 해주는 기능이다.

이밖에도 

input type="URL"

input type="tel"

input type="serch" 등이 있다.

<input type="email">
<input type="submit>