<form></form>

• html에서 사용자가 입력할 수 있는 양식을 제공하는 태그이다.

• 태그 내의 input 태그들을 통해 사용자가 입력한 정보를 서버로 넘기는 역할을 한다.

  action 속성 → 폼의 입력된 값들을 전송받을 서버의 클래스명을 입력한다.

  method 속성 → get/post 방식으로 전송방식을 지정한다.

  target 속성 → 현재의 창을 활용하는지 새 창을 활용하는지 결정

<form action="#" method="get">
    <label>검색할 내용: </label><input type="text" name="search"> &nbsp;
    <input type="submit" value="검색">
</form>

submit 버튼을 눌렀을 때 action에 지정한 경로로 method에 지정한 방식으로 input태그 값을 전달한다.

• get 방식은 입력한 방식을 상단에 노출, post 방식은 비공개

<filedset></filedset>, <legend></legend>

• 폼 요소를 그룹으로 묶는 태그, 묶은 폼 요소에 명칭을 붙이는 태그
• 필드셋으로 묶은 영역별로 구분하기 좋게 한다.

<form>
        <fieldset>
            <legend>필드셋의 제목을 작성하는 부분이다.</legend>
            <label>입력1: </label><input type="text"><br>
            <label>입력2: </label><input type="text"><br>
            <label>입력3: </label><input type="text"><br>
        </fieldset>
</form>

[ 속성값 설정 ]

type = “ text “

• 한 줄짜리 텍스트를 입력할 수 있는 텍스트 상자
• type은 입력창의 타입을 결정하는 속성이다.

type = “ password ”

• 입력 시 값이 그대로 노출되는 것이 아닌 암호화 되어 노출

<label for="uid">아이디: </label>
<input type="text" id="uid" name="userId" size="80" 
placeholder="아이디를 입력하세오" value="하이미디어">
<br>
<label>비밀번호: </label>
<input type="password" name="userpwd"
placeholder="비밀번호를 입력하세요.">

→ placeholder로 텍스트창에 안내문구를 작성할 수 있다.

type = "search", type = "url, type = "email", type = "tel”

 <input type="search" name="searchtext" placeholder="검색할 내용 입력하세요."><br>
 <label >홈페이지: </label>
 <input type="url" name="homepage" value="https://" required><br>
 <label >이메일: </label>
 <input type="email" name="email" placeholder="이메일을 입력하세요."><br>
 <label >전화번호: </label>
 <input type="tel" name="phone" placeholder="전화번호를 입력하세요."><br>

[ 숫자 관련 input 태그 ]

type = "number”

• 입력창에 숫자를 입력하는 것이 기본이지만 브라우저에 따라 스핀박스가 표시될 수 있음

type = "range”

• 슬라이드 바를 통해 숫자를 지정할 수 있다.

<label>수량</label>
<input type="number" name="amount" min="1" max="100" value="0" step="5">
<!--  최솟값은 1, 최댓값은 100일때, 5단위로 증가, 초기값 0설정-->

****<label>점수: </label>
<input type="range" name="point" min="0" max="100" value="50" step="10">
<input type="submit"> &nbsp; <input type="reset" value="취소">
<!-- 최솟값은 0, 최댓값은 100일때 10단위로 설정가능, 초기값은 50설정 -->

[ 날짜 /시간과 관련된 input 태그 ]

type = "date", type = "month", type = "week", type = "time", type = "datetime-local”

date → 년, 월, 일 선택 양식을 생성

month → 년, 월 선택 양식을 생성

week → 주 선택하는 양식 생성

datetime-local → 년, 월, 일 시간 선택 양식 생성

<label>date: </label><input type="date" name="date"><br>
<label>month: </label><input type="month" name="month"><br>
<label>week: </label><input type="week" name="week"><br>
<label>time: </label><input type="time" name="time"><br>
<label>datetime-local</label><input type="datetime-local" name="datetime-local"><br>

[ 라디오 버튼과 체크박스 버튼 ]

type = "radio”, type = "checkbox”

• 라디오는 원형버튼, 체크박스는 사각형 모형의 버튼이라는 차이가 있다.

<!-- 라디오 -->
<input type="radio" id="male" name="gender" value="M">
<label for="male">남자</label>
<input type="radio" id="female" name="gender" value="F">
<label for="female">여자</label>
<input type="submit"> &nbsp; <input type="reset" value="취소">
<!-- 체크박스 -->
<input type = "checkbox" id="baseball" name="hobby" value="baseball" checked>
<label for="baseball">야구</label>
<input type = "checkbox" id="football" name="hobby" value="football">
<label for="football">축구</label>
<br>
<input type="submit"> &nbsp; <input type="reset" value="취소">

• Name으로 집합을 만들어 하나만 체크할 수 있다.(Name으로 하나의 그룹 형성)
  • Name 이 다르면 중복체크 가능
• checked 속성을 사용하면 처음부터 체크표시가 되어 보여진다.

[ 그 밖의 input 태그 ]

type = "color”

• 색상을 선택하여 표시할 수 있다.

type = "file”

• 파일을 업로드 하여 서버로 전송할 수 있음
• form 안에 file 태그가 있으면 form 태그에서 **enctype="multipart/form-data"**를 작성

type="button”

• 단순 버튼을 의미하며 따로 저장하거 넘기는 기능은 없음
• type을 설정하지 않으면 submit 버튼이 된다.

<label>색상 선택: </label><input type="color" name="color">
<label>파일 선택: </label><input type="file" name="uploadfile" multiple>
<button type="button">버튼</button> &nbsp; <button type="reset">리셋</button>

[ select 태그와 option태그 ]

• select → 드롭다운 목록으로 값을 입력
• option → list에서 옵션값으로 지정

<label>국적: </label>
<select name="select1">
<option value="ko">한국</option>
<option value="ch">중국</option>
<option value="jp">일본</option>
<option value="etc">기타</option>
<option value="" selected>--</option>
</select>

• db에 컬럼값으로 들어갈 값을 value로 지정한다.
• selected 속성을 이용해 처음부터 선택해 나오도록 설정
• size와 multiple 속성을 이용해 다중 선택이 가능하다.