html 에 있는 form과 input에 대해서 공부합시다.

 

form태그

input태그는 닫지 않습니다. 인풋태그에는 여러가지 옵션이 있습니다.

<form><input></form>

 

 

input의 type

가장 많이 사용이 되는 옵션 들입니다.

종류가 여러가지가 많이 있습니다. 암기를 하시려고 하면 안됩니다.

구글에서 필요할 때 검색을 해서 찾아서 쓰면 됩니다.

<input type="text"> <input type="email"> <input type="password"> <input type="radio"> <input type="file"> <input type="checkbox"> <input type="submit"> <select>    <option>옵션1</option>    <option>옵션2</option>    <option>옵션3</option> </select> <textarea></textarea>

 

 

input에 넣는 속성들

placeholder는 배경 글자입니다. 흐릿한 회색으로 보입니다.

value는 미리 입력된 값입니다. 

name은 서버 기능개발에 필요한 인풋의 이름을 설정 가능합니다.

<input placeholder="인풋안에 배경 텍스트"           value="인풋안에 미리 입력된 텍스트"           name="서버에서 필요한 인풋의 이름">

 

HTML의 셀렉터

HTML의 속성으로 CSS셀렉터를 사용할 수 있습니다.

input의 type속성이 text인 요소만 찾아서 스타일을 줄 수 있습니다.

폼에서 특히 유용하게 사용합니다. 

마진, 패딩, 글자 크기 등을 자유롭게 줄 수 있습니다.

input[type=text] { color : grey }

 

 

전송버튼

둘 중 하나 쓰시면 됩니다.

그리고 물론 <form> 태그 안에 있어야 잘 작동합니다.

<button type="submit">전송</button> <input type="submit">