[HTML]HTML form, semantic HTML

form 태그와 관련해서

1. form, action="", method=""

<form action="submission.html" method="POST">
<!-- action form의 정보가 어디로 가는 지
method: 정보가 어떻게 보내지는 지
</form>

2. input과 type 그리고 속성들

<input type="text"> 적을 수 있는 빈 칸? 줄이 생성
<input type="password"> ******* 비밀번호 입력 칸이 생성
<input type="number" name="amount" id="amount"> 숫자를 적을 수 있는 빈 칸이 생성
<input type="range" name="score" id="score" value="50" min="9" max="100"> 범위를 정할 수 있는 슬라이더가 생성
<input type="checkbox" name="code-bootcamp" id="wecode" value="wecode> 체크 박스 생성
<input type="radio" name="apply" id="yes" value="yes"> radio box 생성
<input type="datalist" id=""> datalist를 생성
<input type="submit" value="Submit"> 제출 버튼 생성

3. select, datalist, textarea

<select> <!-- 선택 input 생성-->
	<option></option>
    <option></option>
    <option></option>
</select>

<datalist> <!-- 찾는 & 선택 input 생성-->
	<option></option>
    <option></option>
    <option></option>
</datalist>

<textarea id="" name="" rows="3" cols"40"></textarea> <!-- 커스트마이즈 할 수 있는 것은 입력할 수 있는 칸이 생성 -->

4. form이 제출되면 name = value 쌍으로 보내진다?!

5. section은 그냥 놔누는 걸까?

6. form에 Client-side 확인

<form>
<input id="username" name="username" type="text<!-- number -->" required minlength="8" maxlenth="15"> <!-- required, 입력하는 것을 요구 | minlengh, 입력 할 수 있는 최소 글자 또는 숫자 수를 만족해야함 | maxlengh, 입력 할 수 있는 최대 글자 또는 수 -->

<input type="number" name="guess" id="guess" min="1" max="10" required> <!-- 숫자 입력 칸에서 입력 가능한 숫자의 최소 값과 최대 값 -->

<input id="username" name="username" type="text" required minlength="3" maxlength="15" pattern="[a-zA-Z0-9]+"> <!-- Regular expressions 또는 regex, 입력할 수 있는 패턴... 이 코드에서는 특수 문자는 입력이 안됨 -->
</form>

7. Semantic HTML 의미론적인 웹?!, 접근성, 검색 엔진 최적화, 이해하기 쉬움

8. header, nav, main, footer 웹페이지 기본 구조 태그

<header>
	<nav>
    </nav>
</header>

<main>
	<section> <!-- 같은 테마의 요소들을 정의함, chapters, heading 등 -->
    	<article> <-- articles, blogs, comments 등을 내용으로 묶음 -->
        </article>
        
        <aside> <!-- 메인 주제와 연관있는 정보를 포함함 -->
        </aside>
    </section>
    
    
   <figure> <!-- 모든 미디어 타입을 캡슐화함? -->
	<img src="https://content.codecademy.com/courses/SemanticHTML/dogimage.jpeg"/>
   	<figcaption></figcaption> <!-- figure 안으 미디어를 설명함 -->
   </figure>
   
   <!-- 미디어 파일에 사용하는 태그들 -->
      <audio controls>
        <source src="https://content.codecademy.com/courses/SemanticHTML/dogBarking.mp3" type="audio/mp3">
      </audio> 
      <video src="https://content.codecademy.com/courses/SemanticHTML/dog-video.mp4" controls loop> <!-- controls, 재생, 소리, 일시 정지 등 표시 | loop 무한 재생>
      </video>
      <embed src="https://content.codecademy.com/courses/SemanticHTML/dog-on-beach.gif"/>	

</main>    	
        
        
        
<footer>
</footer>

• optimization: 최적화
• encapsulate: 캡슐화하다?!