Coolog πŸ–₯️

/ /

[HTML/CSS] form & input


πŸ’« <form> νƒœκ·Έ

<form>Β νƒœκ·ΈλŠ” μ›Ή νŽ˜μ΄μ§€μ—μ„œμ˜Β μž…λ ₯ 양식을 의미
ν…μŠ€νŠΈ ν•„λ“œμ— κΈ€μžλ₯Ό μž…λ ₯ν•˜κ±°λ‚˜, μ²΄ν¬λ°•μŠ€λ‚˜ λΌλ””μ˜€ λ²„νŠΌμ„ ν΄λ¦­ν•˜κ³  제좜 λ²„νŠΌμ„ λˆ„λ₯΄λ©΄Β λ°±μ—”λ“œ μ„œλ²„μ— 양식이 μ „λ‹¬λ˜μ–΄ 정보λ₯Ό 처리

  • name: 폼의 이름
  • action: 폼 데이터가 μ „μ†‘λ˜λŠ” λ°±μ—”λ“œ url
  • method: 폼 전솑 방식 (GET / POST)

Β 

πŸ’« <input> νƒœκ·Έ

<input type="text">
<input type="email">
<input type="password">
<input type="radio">
<input type="file">
<input type="checkbox">
<input type="submit">
<select>
  <option>μ˜΅μ…˜1</option>
</select>
<textarea></textarea>
  • <input> νƒœκ·Έμ— λ„£λŠ” 속성듀
<input placeholder="μ–΄μ©Œκ΅¬" value="μ–΄μ©Œκ΅¬" name="age">

placeholder : λ°°κ²½ κΈ€μž
value : 미리 μž…λ ₯된 κ°’
name : μ„œλ²„ κΈ°λŠ₯ κ°œλ°œμ— ν•„μš”ν•œ μΈν’‹μ˜ 이름을 μ„€μ • κ°€λŠ₯

  • HTML μ†μ„±μœΌλ‘œ CSS μ…€λ ‰ν„° μ‚¬μš©
input[type=email] {
  color : grey
}
  • 전솑 λ²„νŠΌ
<button type="submit">전솑</button>
<input type="submit">

<form> νƒœκ·Έ μ•ˆμ— μžˆμ–΄μ•Ό μž‘λ™!
Β 

πŸ’« 였늘의 μˆ™μ œ : λ ˆμ΄μ•„μ›ƒ λ§Œλ“€κΈ°

See the Pen
Untitled
by dozzs (@dozzs)
on CodePen.

λ‹΅κΈ€ 남기기

이메일 μ£Όμ†ŒλŠ” κ³΅κ°œλ˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€. ν•„μˆ˜ ν•„λ“œλŠ” *둜 ν‘œμ‹œλ©λ‹ˆλ‹€

졜근 κ²Œμ‹œλ¬Ό