HTML BASIC 2

Table

행(ROW)과 열(COLUMN)로 구성된 2차원 데이터베이스 형태의 요소

<table></table>

<th></th> Table Header : 기능적 선언
<tr></tr> Table Row : 행 추가, 기능적 선언
<td></td> Table Data : 열 추가, 기능적 선언

<colspan></colspan> : 열 합치기
<rowspan></rowspan> : 행 합치기

<thead></thead> : 의미적 선언, 2행 이상의 헤더 그룹화
<tbody></tbody> : 의미적 선언
<tfooter></tfooter> : 의미적 선언

---

Form

입력된 값에 따라 문서를 처리하는 요소

<form action="" method=""></form>

action : http 요청 전송 위치 (/adress)
method : http 요청 전송 방법

• post
• get
• put
• delete

Form 내부 요소

input : 데이터 입력

<input type="" />

• type : 입력 형태 지정

  • text

  • password

  • number

    • min/max/step 설정 가능 (선택)

  • color

  • checkbox

    • checked : default 값 설정 가능

  • radio

    • name이 동일한 다중 버튼 구성
    • value로 구별, 보이진 않으나 전송 시 각 value 값 전송

    <label for="y">Yes!</label>
    <input type="radio" name="answer" id="y" value="y">
    <label for="n">No!</label>
    <input type="radio" name="answer" id="n" value="n">
    
    

  • select

    • select 요소 내 다중 option 구성
    • 각 option의 value로 구별

    <select name="fruits" id="fruits">
    	<option value="app" selected>apple</option>
        <option value="gra">grape</option>
        <option value="ban">banana</option>
     </select>

  • range

    • min/max 설정

  • email

  • url

  • submit 비추

• name: key의 역할, 데이터 전송 시 값(value)을 레이블링

• placeholder : 입력칸 소개 (값 입력 시 사라짐)

• id

• class

---

lable

<lable for="idname">
: 다른 요소 id와 연결, label 클릭 시 해당 id와 연결된 input 요소가 선택됨

<div class="signup">
    <label for="agree">동의</label>
    <input type="checkbox" name="termsAgree" id="agree">
</div>

---

textarea

• rows/cols 크기 설정 가능
  
  

---

button

<button></button>

• type
  • submit (default)

---

유효성 검사

적합한 패턴이 아니면 form을 전송하지 않음

• required : 필수 입력
• minlength maxlength : 글자수 제한
• min max : 숫자 날짜 값 제한
• regular expression
  • email type은 @를 포함한 형식 (defalt)
  • url type은 http:// 형식 (default)
  • ^(?=.\d)(?=.[a-z])(?=.[A-Z])(?=.[a-zA-Z]).{8,}$ 영문 대소문자 1개 이상을 포함한 8자 비밀번호 형식