[HTML5&CSS] Form Elements

다음 form을 구성하는 HTML elements에 대해서 알아보자.

  • form
  • input
  • label
  • textarea
  • fieldset
  • select
  • button

 

form element는 다른 input이나 button elements들을 담는 element이다. form에는 action과 method, 두가지 attributes를 넘겨야 한다. action attribute는 그 form의 data를 어디로 submit할지를 정한다. method attribute는 그 form의 data를 get으로 보낼지, post로 보낼지를 정한다. 일반적으로 get method는 query string으로 표현되므로 unsecured data를 다룰 때 사용되고, post는 secure data를 다룰 때, 또는 많은 양의 data를 다룰 때 사용된다. 다음과 같은 형식이다.

input element는 text input field, radio buttons, checkboxes를 만든다. type과 name attribute가 필요하다. type attribute는 입력의 type을 정한다. name attribute는 form을 submit할 때 구분할 unique name을 정한다. form data는 key-value pairs로 구성되는데, 이 때 키가 되는 것이 name이고, 해당하는 값이 value가 된다.

text type의 예제는 다음과 같다. maxlength attribute로 최대 길이를 정할 수 있다.

E-mail의 입력에는 email type을 사용할 수 있다.

password의 입력에는 password type을 사용할 수 있다.

checkboxes를 사용할 때는 checkbox type을 사용한다. name에 unique한 값을 주고, 각 checkbox의 value에도 unique한 값을 준다.

radio buttons를 사용할 때는 radio type을 사용한다. 모든 name에 같은 값을 주고, 각 button의 value에 unique한 값을 준다.

 

label element는 input elements들과 연관된 text를 줄 때 사용한다. 예를 들면 위에서 “이름 :” 같은 것들. 스크린리더를 사용하는 사람들에게 도움이 된다. label element는 input의 id attribute와 연관되는 for attribute를 가진다.

 

textarea element는 여러 줄의 text 입력을 위해 사용한다. rows와 cols attributes로 size를 지정할 수 있다.

 

fieldset element는 여러 form 내의 elements들을 그룹짓고 싶을 때 사용한다.

 

select element는 select boxes를 만든다. 매우 긴 list의 옵션 중 하나를 선택할 때 쓴다. select element 안에 option element의 list를 넣어서 만든다.

 

button element는 form을 submit할 때 사용한다. type attribute로 세가지 값을 사용할 수 있다. 첫번째로 아무 행동도 안하는 것, 두번째로 “reset”, 이걸 누르면 form 값들이 모두 리셋된다. 마지막으로 “submit”, 클릭하면 submit한다.

curl 사용법

curl 잘쓰면 엄청 편하다.
* HTTP 전송 과정에 대한 상세 정보. curl이 하는 모든 일을 debugdump.txt에 저장한다.
curl –trace-ascii debugdump.txt http://blog.dasomoli.org/
* 일반적인 http 요청(GET method)
curl http://blog.dasomoli.org/
* HTTP authentication
curl -u <id>:<password> http://blog.dasomoli.org/
* POST method 요청
curl -X POST -d”<data>” http://blog.dasomoli.org:80/post/
다음과 같은 form이 있다면,
<form method=”POST” action=”dasomoli.cgi”>
<input type=text name=”id”>
<input type=submit name=press value=” OK “>
</form>
다음과 같이 전송 가능((hidden type도 그냥 쓰면 됨)
curl –data “id=dasomoli&press=%20OK%20”  http://blog.dasomoli.org/dasomoli.cgi
–data-urlencode를 쓰면 %20같이 쓰지 않고, 아래처럼도 가능하다고 한다.
curl –data-urlencode “name=JeongSeok Yang” http://blog.dasomoli.org/dasomoli.cgi
* POST로 파일 보내기
curl -X POST -d@<filename> http://blog.dasomoli.org/post/
* PUT method
curl –upload-file uploadfile http://blog.dasomoli.org/receiveput.cgi
* JSON 전송
curl -X POST http://blog.dasomoli.org/json/ -d@dasomoli.json -H “Content-Type: application/json”
* 쿠키 쓰기
curl -b cookie.txt -c cookie.txt http://blog.dasomoli.org/