10. form , input, textarea, select

오늘의 포스팅은 User의 Input을 받아들이는 태그에 대해 진행하겠습니다.

 

● <form>

: form 태그는 제출용을 위해서 사용하며 action 속성을 갖는다. 제출하면 해당 주소에 정보를 전달해 처리한다. (JS때 자세히!)

 

● <input>

: 속성이 굉장히 다양합니다. 또한 input 태그는 닫는 태그가 존재하지 않습니다. 

 

input의 속성

1. type 

<input type="text">
<input type="email">
<input type="password">
<input type="radio">
<input type="file">
<input type="checkbox">
<input type="submit"> <!-- button 태그와 동일한 역할 -->

: 역할은 생각하시는 그대로 입니다. 

 

2. placeholder

: 아래의 사진과 같이 사용자가 입력할 요소에 대한 힌트를 주는 음영처리된 글자입니다. 

<input class='non-name-input' type='email' placeholder="email@naver.com">

 

3. value 

: 실제로 들어가 있는 값을 지정 할 수 있습니다. 

<input class='non-name-input' type='email' value='email'>

4. name

: 기능개발을 위해서 input의 이름을 지정할 수 있습니다. 

 

참고 [CSS Selector] 

input의 type들을 선택하여 동일한 디자인을 부여할 수 있다.

input[type=text]{
	color : gold; 
}

 

● <select> 

<select>
  <option>1</option>
  <option>2</option>
  <option>3</option>
</select>

● <textarea>

속성

- 얼마나 보여질 것인지? 

1. cols (열) : 가로

2. rows (행) : 세로