Form, Input

yeji kangΒ·2020λ…„ 7μ›” 21일
0

html,css

λͺ©λ‘ 보기
5/6

🐝 Form ,Input νƒœκ·Έλ₯Ό κ³΅λΆ€ν•΄λ³΄μž.

Form

μ›Ή νŽ˜μ΄μ§€μ—μ„œλŠ” form μš”μ†Œλ₯Ό μ‚¬μš©ν•˜μ—¬ 데이터λ₯Ό μ „μ†‘ν•˜κ±°λ‚˜ μž…λ ₯ν•œ 데이터λ₯Ό μ„œλ²„λ‘œ 보낼 λ•Œμ—λ„ form μš”μ†Œλ₯Ό μ‚¬μš©ν•©λ‹ˆλ‹€.

example

  • action : submit을 ν•˜λ©΄ μˆ˜ν–‰ν•  μž‘μ—…μ„ μ •μ˜ν•©λ‹ˆλ‹€.
    -> 데이터 처리 ν•  슀크립트 파일의 μ£Όμ†Œλ₯Ό μ μ–΄μ€λ‹ˆλ‹€.
  • method: 이 속성은 GET or POST λ‘˜ 쀑 ν•˜λ‚˜λ‘œ μ§€μ •ν•©λ‹ˆλ‹€. 데이터λ₯Ό μ œμΆœν•  λ•Œ μ‚¬μš©ν•  HTTP λ©”μ†Œλ“œλ₯Ό μ§€μ •ν•©λ‹ˆλ‹€.

πŸ‘€ GET ? POST ?

  • λ―Όκ°ν•œ 데이터라면 항상 POSTλ₯Ό μ‚¬μš©ν•©λ‹ˆλ‹€. μ™œλƒν•˜λ©΄ 이 방법은 νŽ˜μ΄μ§€ μ£Όμ†Œ ν•„λ“œμ— 데이터λ₯Ό ν‘œμ‹œν•˜μ§€ μ•ŠκΈ° λ–„λ¬Έμž…λ‹ˆλ‹€.
  • GET : name/value 쌍으둜 데이터λ₯Ό URL에 μΆ”κ°€, URL의 κΈΈμ΄λŠ” μ œν•œ(2048자) , Google의 쿼리 λ¬Έμžμ—΄κ³Ό 같은 λΉ„λ³΄μ•ˆ 데이터에 μ ν•©ν•©λ‹ˆλ‹€.
ex ) .../action_page.php?fname=John&lname=Doe  (GET 버전) 
  • POST : 크기 μ œν•œμ΄ μ—†μœΌλ©°, λŒ€λŸ‰μ˜ 데이터λ₯Ό λ³΄λ‚΄λŠ”λ° μ‚¬μš©ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

Input

λ‹€μ–‘ν•œ νƒ€μž…μ˜ inputμš”μ†Œλ“€μ΄ μžˆμŠ΅λ‹ˆλ‹€.
1. button
2. checkbox
3. number
4. submit
5. text
.. 이 외에도 λ§Žμ€ μš”μ†Œλ“€μ΄ μžˆμŠ΅λ‹ˆλ‹€.

예제 (text,password)

  • type="text" : type의 속성값을 text둜 μ„€μ •ν•œλ‹€λ©΄ ν…μŠ€νŠΈλ₯Ό μž…λ ₯받을 수 μžˆμŠ΅λ‹ˆλ‹€.ex) id μž…λ ₯
  • type="password" : μ‚¬μš©μžλ‘œλΆ€ν„° λΉ„λ°€λ²ˆν˜Έλ₯Ό μž…λ ₯받을 수 μžˆμŠ΅λ‹ˆλ‹€. ν™”λ©΄μ—λŠ” 문자,μˆ«μžκ°€ μ•„λ‹Œ λ³„ν‘œλ‚˜ μž‘μ€ 원 λͺ¨μ–‘이 λ³΄μ—¬μ§‘λ‹ˆλ‹€.
  • placeholder : μž…λ ₯ν•˜κΈ° μ „ input 칸에 λ³΄μ—¬μ§€λŠ” λΆ€λΆ„μœΌλ‘œ 도움말을 μ„€μ •ν•  수 μžˆμŠ΅λ‹ˆλ‹€. μ‹€μ œ μž…λ ₯ν•  λ•ŒλŠ” 영ν–₯을 주지 μ•ŠμŠ΅λ‹ˆλ‹€. μ§€κΈˆ μ—¬κΈ°μ—μ„œλŠ” id & password 둜 μ„€μ •ν•΄ 아이디와 λΉ„λ°€λ²ˆν˜Έ μΉΈμ΄λΌλŠ” 것을 μ•Œλ €μ€„ 수 μžˆμ—ˆμŠ΅λ‹ˆλ‹€.


placeholder , value

  • 도움말을 μ„€μ • : placeholder
  • 미리 값을 μ„ΈνŒ… ν•˜λŠ” 것 : value

value example

  • μž…λ ₯ν•˜κΈ° μ „ 123456이 μž…λ ₯λ˜μ–΄μžˆλŠ” 것을 확인할 수 μžˆμŠ΅λ‹ˆλ‹€.

textarea

  • μ‚¬μš©μžλ‘œλΆ€ν„° μ—¬λŸ¬μ€„μ˜ ν…μŠ€νŠΈλ₯Ό μž…λ ₯받을 μˆ˜μžˆμŠ΅λ‹ˆλ‹€.

    • μ—¬κΈ°μ„œ 'μ†Œκ°œ'λŠ” placeholder κ°€ μ•„λ‹™λ‹ˆλ‹€!
  • rows, cols 지정할 수 μžˆμŠ΅λ‹ˆλ‹€.

μΆ”κ°€ 팁 : 였λ₯Έμͺ½ μ•„λž˜ μ‚Όκ°ν˜•μ„ λŒμ–΄λ³΄λ©΄ μ‚¬μ΄μ¦ˆ 쑰절이 λ©λ‹ˆλ‹€. 이뢀뢄을 λ§‰μœΌλ €λ©΄ cssμ—μ„œ μ•„λž˜μ™€ 같이 μˆ˜μ •ν•©μ‹œλ‹€.

textarea {
 resize: none; 
}

checkbox

  • μ—¬λŸ¬ 개의 μ˜΅μ…˜ μ€‘μ—μ„œ λ‹€μˆ˜μ˜ μ˜΅μ…˜μ„ 선택할 수 μžˆμŠ΅λ‹ˆλ‹€.
  • πŸ‘€ μ •ν™•ν•œ μž…λ ₯을 μ „μ†‘ν•˜κΈ° μœ„ν•΄μ„œλŠ” input의 name 속성이 κ°™μ•„μ•Όν•©λ‹ˆλ‹€.
  • checked 섀정을 톡해 μ—¬λŸ¬ 개의 μ˜΅μ…˜ 쀑 미리 μ„ νƒλ˜μ–΄μžˆλŠ” μ˜΅μ…˜μ„ 지정할 수 μžˆμŠ΅λ‹ˆλ‹€.
  • disabled : ν•΄λ‹Ή μ˜΅μ…˜μ„ 선택할 수 μ—†κ²Œ μ„€μ •ν•©λ‹ˆλ‹€.

  • appleλ₯Ό checkedν•΄μ„œ 미리 μ„ νƒλ˜μ–΄μ Έ μžˆμ—ˆκ³ , peach λŠ” disabled μ„€μ •ν•΄μ„œ νšŒμƒ‰ λ°•μŠ€λ‘œ ν‘œν˜„λ˜μ—ˆμŠ΅λ‹ˆλ‹€.

CSS

  • placeholder 의 색깔을 λ°”κΎΈκ³  μ‹Άλ‹€λ©΄ input::placeholder μ•ˆμ—λ‹€κ°€ μˆ˜μ •ν•©μ‹œλ‹€.
  • input νŠΉμ • type의 placeholder만 λ°”κΎΈκ³  μ‹Άλ‹€λ©΄ [type=""] 을 μΆ”κ°€ν•΄μ„œ μž‘μ„±ν•΄μ€λ‹ˆλ‹€.
profile
dγ…‡

0개의 λŒ“κΈ€