[HTML] <form>, <input>, <select> 사용자에게 입력 받기 (2)

form에 유저가 정보를 작성하고 나면 내용을 서버로 전송을 해줘야한다. 그럴때 사용하는 태그가 <submit>과 <image> 이다.

유저가 해당 버튼을 클릭하면 form태그의 value속성에 작성한 폼 처리 프로그램으로 넘어가게 된다. <image> 는 submit과 똑같은 기능을 하는데 클릭하는 부분만 개발자가 원하는 이미지로 설정한다. <reset>버튼은 작성한 모든 정보를 지우고 초기상태로 돌아간다.

submit과 reset 버튼에 보여질 내용은 value속성에 작성한다.

input의 주요 속성을 소개하자면 1. placeholder: 입력창안에 흐린 글씨로 내용이 표시된다.

2. autofocus: 사용자가 해당 페이지에 들어오면 autofocus를 작성한 input 폼에서 커서가 깜빡인다. 3. readonly: 입력이 불가능하다. 하지만 전송 버튼 누르면 서버로 내용이 전달된다. (인터넷 주문시킬때 사용자가 입력안해도 자동으로 작성되어있는 칸 생각하면 된다.)

See the Pen submit,reset by Te___ho (@xogh8755) on CodePen.

한줄 정도의 텍스트 입력은 위의 input속성을 사용하면 된다. 여러줄을 입력 받을 때는 <textarea>를 사용해준다. form안에

<textarea></textarea>를 작성해주기만 하면 된다. col, row 속성을 이용해서 크기를 조절할 수 있지만 css를 사용하는 방법이 더 용이하다.

드롭 박스를 생성하는 방법은 <select>, <datalist> 두가지가 있다. 차이점은 datalist는 드롭 박스에 없는 값도 사용자가 입력할 수 있다.

두 태그 모두 자식 태그로 option으로 목록을 생성할 수 있고  select 태그의 속성에는 size=> 내용 몇개 표시할지 명시. multiple=>복수 선택가능 이 있다. select는 form안에서 사용하면 되고 datalist는 form안의 input안에서 사용되며 input type을 text로 작성한 후 list라는 속성을 부여한다. 그러고나서 datalist태그를 생성하는데 이 때 input의 list 속성값과 datalist의 id 속성값이 일치해야한다.

See the Pen textarea_datalist_select by Te___ho (@xogh8755) on CodePen.