μ€λμ μΉμ¬μ΄νΈμμ μμ£Ό μ¬μ©νλ form HTMLμ λν΄μ νμ΅νμλ€.
λνμ μΌλ‘ λ§μ΄ μ¬μ©νλ νκ·Έλ€κ³Ό μμ±λ€μ μ 리ν΄λ³΄κ³ μ νλ€.
inherit
β html HTML λ¬Έμμ μ΅μμ μμ
β :root λ¬Έμμ μ΅μμ μμλ₯Ό λνλ΄λ μμ¬ ν΄λμ€μ λλ€
β * λͺ¨λ μμλ₯Ό μ ννλ μ λλ²μ€ μ νμμ λλ€.
html,rootμ νμλ νμλ‘ μμλμ΄ μ μ©λκ³ , * μ νμλ λ°λ‘ λͺ¨λ μμμ μ μ©λλ€!
transition
μμμ νΉμ μμ±μ΄ λ³ν λ ν΄λΉ λ³νλ₯Ό λΆλλ½κ² μ²λ¦¬νλ λ° μ¬μ©νλ€.
transform
μμμ λ³ν(μ΄λ, νμ , ν¬κΈ° μ‘°μ λ±)μ μ§μ νλ λ° μ¬μ©νλ€. 2D, 3D λ³ν λͺ¨λ λ€λ£° μ μλ€!
βοΈ μ νμ ꡬννλ μ½λλ transtitionμ νΈλ¦¬κ±°νλ μ΄λ²€νΈκ° μλλΌ, μμμ μ΄κΈ° μνμ μ μ©νλ€.
.box {
width: 100px;
height: 100px;
background-color: blue;
transition: width 0.5s ease-in-out, transform 0.5s ease-in-out;
}
.box:hover {
width: 150px;
transform: rotate(45deg);
}
μ¦, νΈλ² κ°μμ νμμ transitionμ λ£λκ² μλλΌ μ»¨ν μ΄λ κΈ°λ³Έ μν(box)μ μ μ©ν΄μΌνλ€!!
HTML Form?
HTMLνΌμ μ¬μ©μμ μΉμ¬μ΄νΈ λλ μ΄ν리μΌμ΄μ μ΄ μλ‘ μνΈ μμ©νλ κ² μ€ μ€μν κΈ°μ μ€μ νλμ΄λ€. νΌμ μ¬μ©μκ° μΉμ¬μ΄νΈμ λ°μ΄ν°λ₯Ό μ μ‘νλ κ²μ νμ©νλ€. μΌλ°μ μΌλ‘ λ°μ΄ν°λ μΉ μλ²λ‘ μ μ‘λμ§λ§ μΉνμ΄μ§κ° λ°μ΄ν°λ₯Ό μ¬μ©νκΈ° μνμ¬ μ¬μ©ν μ λ μλ€.
formμ μ λ ₯λ λ°μ΄ν°λ₯Ό νλ²μ μλ²λ‘ μ μ‘νκ³ , μ μ‘ν λ°μ΄ν°λ μΉ μλ²κ° μ²λ¦¬νκ³ , κ²°κ³Όμ λ°λ₯Έ μΉ νμ΄μ§λ₯Ό 보μ¬μ€λλ€!
action μμ±κ³Ό method μμ±μ νμμ μΌλ‘ μ€μ ν΄μΌ νλ€.
β action : λ°μ΄ν°λ₯Ό λ³΄λΌ URLμ μ§μ νλ€. (dafault: μ΄ νμ΄μ§λ₯Ό μν΄ μ‘΄μ¬νλ urlμ£Όμ)
→ μ΄ λ°μ΄ν°λ₯Ό HTML νμΌλ€μκ² λ³΄λ΄ DBμ μ μ₯ν μ μκ²λλ€.
β method : μ΄λ€ HTTP λ°©μμ μ¬μ©ν κ²μΈμ§ μ§μ νλ€.(GET μ΄λ POST)
- GET: μμ λ°μ΄ν°λ₯Ό actionμ URLμ 쿼리 λ¬Έμμ΄μ ν¬ν¨μμΌ μλ²λ‘ μ μ‘νλ©°, μ£Όλ‘ λ°μ΄ν°λ₯Ό κ²μνκ±°λ κ°μ Έμ€λλ° μ¬μ©λ©λλ€.
<form action="/search" method="get">
<input type="text" name="query" placeholder="κ²μμ΄ μ
λ ₯">
<input type="submit" value="κ²μ">
</form>
μ¬μ©μκ° "κ²μμ΄ μ λ ₯" νλμ κ°μ μ λ ₯νκ³ νΌμ μ μΆνλ©΄, URLμ "/search?query=μ¬μ©μμ λ ₯κ°"κ³Ό κ°μ΄ μ μ‘λ©λλ€.
κ°λ°μλꡬ λ€νΈμν¬ νμμ 쿼리λ₯Ό νμΈν μλ μλ€.
nameμμ±κ°μ΄ query, inputμ μ λ ₯ν κ°μ΄ valueκ° λλ€!
- POST: μμ λ°μ΄ν°λ₯Ό HTTP μμ² λ³Έλ¬Έμ ν¬ν¨μμΌ μ μ‘ν©λλ€.
<form action="/submit" method="post">
<label for="username">μ¬μ©μ μ΄λ¦:</label>
<input type="text" id="username" name="username">
<input type="submit" value="μ μΆ">
</form>
μλ²λ‘ λ°μ΄ν°κ° μ μ‘λμ§λ§ URLμλ λνλμ§ μμ΅λλ€. μ΄ λ°μ΄ν°λ HTTP μμ²μ λ³Έλ¬Έμ ν¬ν¨λ©λλ€.
μμ μ§ν μ€μλ, postλ μ€λ₯κ° λ°μνλλ°, νμ¬μλ²(κ°λ°μλ²)μΈ λΌμ΄λΈ μλ² μ΅μ€ν μ μμλ post μ§μμνλ€!
βnovalidate : λΈλΌμ°μ κ° κΈ°λ³Έμ μΌλ‘ μ 곡νλ μ ν¨μ± κ²μ¬λ₯Ό 무μνκ³ , μ¬μ©μκ° μ μΆν λ°μ΄ν°κ° μλ²λ‘ μ μ‘λλλ‘ ν μ μμ΅λλ€.(boolean μμ±)
<input>
<input>μ λ°μ΄ν°λ₯Ό μ λ ₯λ°κΈ° μν μμλ‘μ¨, λ€μν typeμ μ λ ₯ νμμ μ§μν©λλ€. (ν μ€νΈ, μ«μ, λ μ§, νμΌ λ±)
(μ°Έκ³ ) inputνκ·Έ μμ fontκ° λΈλΌμ°μ μμ λν΄νΈλ‘ κ°μ΄ μ§μ λμ΄μλ€.
Attribute
λ€μν typeλ§νΌ μμ± λν λ€μνλ°, μ¬κΈ°μ κΈ°μ΅ν΄μΌν μμ±λ€λ§ μ 리ν΄λ³΄μλ€.
βname : μ λ ₯ νλμ μ΄λ¦μ μ§μ νλ©°, νΌμ μλ²λ‘ μ μΆν λ μλ²μμ μ μΆλ λ°μ΄ν°λ₯Ό μΆμΆν μ μλλ‘ λ°μ΄ν°μ μλ³μλ‘ μ¬μ©λ©λλ€. (μμ λ°μ΄ν° λΆλΆμ΄ μκΈ°λλ°, nameμ μ¬μ©νλ©΄, λΈλΌμ°μ μ μν΄ λ°μ λλ μμ²μ μλμΌλ‘ 첨λΆλλ€.)
<input type="radio">
λΌλμ€ λ²νΌμ κ°μ name μμ±μ κ°μ§ μ¬λ¬ κ°μ μ΅μ μ€ νλλ₯Ό μ νν μ μλ μ λ ₯ μμμ λλ€. νλμ λΌλμ€ λ²νΌ κ·Έλ£Ή λ΄μμ λμΌν nameμ κ°μ§ λΌλμ€ λ²νΌμ κ·Έλ£Ήμμ νλλ§ μ νλ μ μμ΅λλ€.
<input type="radio" name="verify" id="verify-text-message" value="text-message"/>
<label for="verify-text-message">Via text message (SMS)</label>
<input type="radio" name="verify" id="verify-phone" value="phone" />
<label for="verify-phone">Via a phone call</label>
<input type="radio" name="verify" id="verify-email" value="email" />
<label for="verify-email">Via email</label>
βvalue : ν΄λΉ λΌλμ€ λ²νΌμ κ°(value)μ λνλ λλ€. λΌλμ€ λ²νΌμ΄ μ νλμ λ, μλ²λ‘ μ μ‘λλ κ°μ λλ€.
λΌλμ€ λ²νΌμ value μμ±μ μ£Όλ‘ νΌμ΄ μλ²λ‘ μ μΆλ λ μ νλ μ΅μ μ κ°μ μλ³νλ λ° μ¬μ©λ©λλ€.
<input type="checkbox">
체ν¬λ°μ€λ μ€λ³΅ μ νμ΄ κ°λ₯νλ€. λΌλμ€λ²νΌκ³Ό λμΌνκ² nameμΌλ‘ κ·Έλ£Ήμ λ¬Άλ건 λμΌνλ€.
μ£Όλ‘, true/falseλ₯Ό ννκ±°λ, μ¬λ¬κ°μ§ μ νμ ν λ 체ν¬λ°μ€λ₯Ό μ¬μ©νλ€.
<div class="form-control-inline">
<input type="checkbox" name="contact" id="contact-email" value="email" />
<label for="verify-email">Via email</label>
</div>
<div class="form-control-inline">
<input type="checkbox" name="contact" id="contact-phone" value="phone" />
<label for="verify-email">Via phone</label>
</div>
<button>
formνκ·Έ μμμ buttonμ submitκΈ°λ₯μ λ΄ν¬νκ³ μμ΄, λ°λ‘ typeμ§μ μ νμ§ μμλ μμμ μ μΆν΄μ€λ€.
<button type="button">Submit</button>
μ΄λ κ² μ§μ ν΄μ€μΌ, λ²νΌμ΄ μμ μ μΆμ νμ§ μλλ€.
μ°Έκ³ : https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input