HTML Forms

<form>
  action-정보 보내는 곳을 결정하는 속성
  method-HTTP 요청에 포함된 HTTP 동사 속성을 할당하는 속성
  ex) <form action="/practice.html" method="POST"> </form>
  ..section 아래 form 아래 h1 아래 p..
  
 <label>
  강조표시/선택 for 속성
  ex) <label for="meal">What do you want to eat?</label>
  ..form 아래..
   
 <input>
  상자에 텍스트 입력
  ..label 아래..
   type의 속성-1.text(내용 입력) -> type(유형), name(이름), value(값), id 속성 
               ex) <input type="text" name="first-text-field" 
                          value="already pre-filled">
   
             2.password(비밀번호 입력) -> * 또는 . 같은 다른 문자로 텍스트 대체함
               label의 for 속성 값과 input의 id, name 속성 값 같게!
               ex) <input type="password" id="user-password" 
                          name="user-password">
   
             3.number(숫자 입력) -> 특수 문자 입력을 제한, 
               숫자의 증감을 위해 화살표 생성하는 step 속성도 필요로한다.
               이 경우도 label의 for 속성 값과 input의 id, name 속성 값 같게!
               ex) <input id="years" name="years" type="number" 
                          step="1">
   
             4.range(범위 입력) -> min(최소값), max(최대값)
               id, name, type, min, max, step 다 필요
               ex) <input id="volume" name="volume" type="range" min="0" max="100" 
                          step="1"
               //또 다른 방법 존재
                <section> - 구체적인 요소가 없는 독립형 섹션 ex)제목
                <class> - 클래스 속성
                <hr> - 단락 사이 나누는데 사용되고 수평선으로 표시됨
                  
              5.checkbox(체크박스 입력-중복 선택가능)
                 <label>사용하여 확인란 식별 필수! 
                 왜?value속성에 할당된 값 있지만 양식에 표시xx
                  ex) <label for="ham">Extra ham</label>
                      <input id="ham" name="topping" type="checkbox" value="ham"> 
                      - 체크박스가 뒤에 표시됨!
                   
               6.radio(여러 옵션 제시하고 하나만 선택가능)
                  ex) <input type="radio" id="two" name="answer" 
                             value="2">
                      <label for="two">2</label>
                   
               7.submit(제출)
                  ex) <input type="submit" value="Send">
                   
드롭 다운 목록 - <select>로 id, name값 준 후 <option>의 value 값 사용
             (value 값에는 소문자!)
              ex) <label for="lunch">What's for lunch?</label>
                  <select id="lunch" name="lunch">
                  <option value="pizza">Pizza</option> </select>
                   
데이터 목록 - 목록에 많은 옵션 있을 경우 <datalist>로 정리 
          (일단은 빈칸으로 표현되고 클릭하면 목록 뜸)
           ex) <label for="city">Ideal city to visit?</label>
               <input type="text" list="cities" id="city" name="city">
               <datalist id="cities">
               <option value="Tokyo"></option> </datalist>
                   
textarea - 많은 텍스트를 작성해야 하는 경우 <input> 대신 사용   
          (<rows>, <cols>로 값 주기)
           더 큰 텍스트 필드 원하면 오른쪽 하단 모서리 클릭하고 드래그하여 확장 가능!
           ex) <label for="blog">New Blog Post:</label>
               <textarea id="blog" name="blog" rows="5" cols="30"> 
               </textarea>
           텍스트에 기본값을 추가하려면-->> 
           <textarea>Adding default text</textarea>