html <form>태그/<input>태그

<form>

- form 태그는 사용자의 입력 값을 서버로 전달시킬 때 사용하는 태그입니다.

- input 태그로 입력받은 값을 서버로 전달시킬 때 주로 사용합니다.

* action="" 

- form 태그의 action 속성에 지정한 문서로 form 태그 사이에 있는 값들을 전송

- action 값에 있는 문서로 form 태그 안의 <name>=?? 이라는 값을 전송

- 전송 후에 action 값 문서 페이지가 열림

- 클라이언트가 서버한테 index.html 페이지를 요청하여 받아오게됨

→ 클라이언트가 입력한 값을 서버로 전송하여 서버에서 action 페이지를 받아옴

* method=""

- 데이터 전달 방식

- get, post

<input>

- 입력 양식을 만들어주는 태그

① <input type="text"/> : 텍스트 상자 넣기

<옵션>

* size="50" (50글자를 넣을 만큼의 크기를 뜻함)

* maxlength="15" (넣을 글자의 수를 15글자로 제한하라)

* value="" (텍스트 박스 안에 기본값 입력)

* name="" (input 태그에 name으로 지정한 이름... form 태그로 사용자의 입력 값을 서버로 전송시킬 때 전송하는 값의 이름을 달아줍니다.

              이름을 달지 않으면 서버에서 사용할 수가 없으므로 필히 입력해주어야 합니다.)

- 위와 같은 옵션은 일부 value를 제외하면 거진 다 같습니다.

② <input type="password"/> : 비밀번호 상자 넣기 (입력시 문자가 감춰진 상태로 출력)

③ <input type="submit"/> : 제출 버튼 생성(입력한 값을 서버로 전송하는 역할)

<옵션>

* value="" (버튼에 있는 글씨 바꾸기..기본값은 제출)

④ <input type="radio"/> : 선택지 만들기, 단일 선택

<옵션>

* name="" (값을 같게 주면 단일선택)

* value="" (서버로 전달할 값, 반드시 입력해야함)

* checked="checked" (기본적으로 선택되어 있는 값)

⑤ <input type="checkbox"/> : 복수 선택지 만들기, 취소 가능

<옵션>

* name="" (값을 똑같이 줘야 함)

* value="" (서버로 전달할 값, 반드시 입력해야함)

⑥ <input type="file"/> : 업로드 파일 선택 버튼 만들기

<옵션>

* multiple (복수 선택 가능)

* name="" (서버에 전달할 값, 서버에는 <name>="파일이름" 으로 전송됨)

⑦ <input type="image"> : 이미지 선택하기

<옵션>

* src="" (이미지 경로 삽입)

* name="" (서버에 전달할 값)

* value="" (서버에 전달할 값)

ex) <name>=<value>

* width="" height="" (가로, 세로 길이)

⑧ <input type="hidden"> : 클라이언트한테 보이지 않게 하는 태그, ip전송할 때 주로 쓰임(php 필요)

⑨ <input type="date"/> : 연도 년 월 일 생생성

⑩ <input type="search"/> : 검색창 생성

<옵션>

* placeholder="검색" (텍스트 창 고정값, 글입력하면 사라짐)

* 입력 값 검증

- 사용자가 입력한 값이 정상적인 값인 지 확인하는 작업

① 값을 입력했는지?

<input type="text" required/>

② url 형식이지?

<input type="url"/>

③ email 형식인지?

<input type="email"/>

기타 <form> 태그 안에서 자주 쓰는 태그들

* <label> : 여는 태그와 닫는 태그 사이에 있는 것들을 묶음

* <textarea> : 여러줄 입력할 수 있는 텍스트창 생성해주는 태그, 기본적으로 사용자가 박스의 사이즈를 조절할 수 있음

<옵션>

* cols="" (가로값)

* rows="" (세로값)

* style="resize:both;" (사이즈 조절 가능..기본값)

="none;" (사이즈 조절 불가능)

="horizontal;" (사이즈 좌우만 조절 가능)

="vertical;" (사이즈 상하만 조절 가능)

* <select> : 셀렉박스 만들기

<옵션>

* name="" (서버에 전달할 값)

* size="" (고정으로 보여줄 목록 개수)

* multiple (복수 선택 가능)

* <button> : 버튼 생성하기

* <button><img src=""></button> : 이미지 버튼 생성하기

* <fieldset> : 박스 생성하기

<legend> : <fieldset> 안에 생성하면 fieldset 태그에 제목 생성