[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한다.

[Web] 웹 개발 시 유용한 사이트

웹 개발 시 유용한 사이트들을 정리한다.

 

[github] 웹 브라우저로 내 repository 업데이트하기

github에서 fork한 내 repository는 해당 시점의 코드에서 멈춰 있게 된다. 이걸 git으로 작업하지 않고 그냥 브라우저 내에서 업데이트할 수 있다. 나에게 pull request하는 방법을 쓰면 된다.

절차를 간단히 설명하면 다음과 같다.

  1. 내 repository에서 “Compare”를 누른 후, “switching the base”

  2. “Create pull request”를 눌러 원본 repository에서 나에게 pull request를 생성

  3. 아래 confirm하는 곳에서 “Merge pull request” 옆의 세모를 눌러 “Rebase and merge”