Html_form

• form 태그

: 사용자로부터 입력받은 요소들을 감싸는 태그

• action 속성
  : 사용자가 폼에 입력한 값을 전달한 주소
• method 속성
  : 사용자가 폼에 입력한 값을 전달할 방법 (get, post) => "서버" 연관된 내용

• input 태그

-disable 속성 : 편집을 불가능하도록 막음 (비활성화)
-placeholder 속성 : 미리보기 텍스트 (안내문구)


: 코드를 입력하세요

<input type="text" autofocus><br/>
<input type="text" disabled><br />코드를 입력하세요

• label 태그

for 속성값과 input 태그의 id 속성값을 일치시키면 label 글씨를 클릭했을때 input창에 포커싱
=> 웹 접근성에 적합 (사용자가 편리하게 사용할 수 있기 때문)
이메일

<label for= "email">이메일</label>
<input type="email" id="user_email">
<input type="color">
<input type="range">
<input type="file">
<input type="date">
<input type="number">
<input type="datetime-local">
<input type="password">코드를 입력하세요

• radio , checkbox

radio input vs checkbox input
-radio , checkbox input: 같은 name 속성값을 부여해서 "카테고리화" 해줘야 함
*checked 속성: 해당 옵션이 기본으로 체크되어 있도록 해줌

-checkbox
드라마
-radio

여자

<input type="checkbox" name="interest" value="drama" checked/> 드라마
<input type="radio" name="gender" value="female" id="female" >
<label for="female">여자</label>

*텍스트label 쓰면 동그라미를 정확히 안누르고 글씨만 눌러도 선택 가능
value 값을 가지고 js에서 활용 또는 동작 가능, 요소에 대한 값
(데이터를 받아옴)
-id : 똑같은 아이디 사용 불가능
-class: 꾸며줄 때 보통 사용

• textarea 태그

: input 보다 더 많은 양의 내용 (여러줄)을 입력 받을 수 있는 요소
-cols, row : 가로 세로 길이를 나타냄
-유저가 마우스 커서를 이용해 우측 하단을 조절하면 크기 변경 가능

<textarea placeholder="문의사항을 입력해주세요" cols="30" rows="10"></textarea>

• select 태그

: 옵션 메뉴를 제공하는 드롭다운 리스트

장미 동백꽃 카네이션 벚꽃 목련 매화

<select name="flowers" id="">
  <optgroup label="red-flower">
    <option value="장미">장미</option>
    <option value="동백꽃">동백꽃</option>
    <option value="카네이션">카네이션</option>
  </optgroup>
  <optgroup label="white-flower">
    <option value="벚꽃">벚꽃</option>
    <option value="목련">목련</option>
    <option value="매화">매화</option>
  </optgroup>
</select>

fieldset: 그룹화 legend: 그룹화한 제목

개인 정보 이름
나이

<fieldset>
  <legend>개인 정보</legend>
  <label for="name">이름</label>
  <input type="text" id="name"><br/>
  <label for="age">나이</label>
  <input type="text" id="age"><br />
</fieldset>

• 버튼

1. input 태그의 type 속성을 이용해 버튼 만들기
2. button 태그

I) 단순 버튼 : 클릭 가능한 버튼

단순 버튼2

<input type="button" value="단순 버튼1"/>
<button type="button">단순 버튼2</button>

II) 제출 버튼 : "폼"을 제출하는 버튼 누르는 순간 제출하면서 새로고침 됨
ex) 로그인, 회원가입

제출 버튼2

<input type="submit" value="제출 버튼1"/>
<button type="submit">제출 버튼2</button>

*참고 type 속성을 생략한 button 태그
-type 속성 : button, submit 값 사용 가능
-button type : 폼 태그(< form >) 바깥에 buttton 태그가 있을 때 기본 값
-submit type : 폼 태그(< form >) 내부에 buttton 태그가 있을 때 기본 값
서버 (back) 에 보내주려고 form 태그 안에 작성하는 것