【 HTML 배우기 】 - 5탄

EunJi·2022년 7월 17일

🦎 Front-end 🦎

목록 보기

6/8

입력 양식과 관련있는 태그는 아래와 같이 여러 개가 있습니다

그 중 우리는 <input>에 대해서 자세히 알아볼 예정입니다 🤭

<input>는 끝 태그가 없는 Empty Tag입니다

<input>는 type 속성을 통해 여러 가지 입력 type을 지정해 줄 수 있습니다 !
아래를 함께 살펴 봅시다 😃

<input>는 아래와 같이 다양한 type 속성을 가지고 있습니다

text
: 일반 문자 or 숫자를 입력할 수 있습니다
password
: 주위 사람에게 노출되지 않도록 *으로 표시해 줍니다
submit
: 해당 페이지를 처리할 수 있는 웹 페이지로 전송해줍니다
reset
: 초깃값으로 되돌려 줍니다
radio
: 하나만 선택할 수 있게 해줍니다
→ ( Tip ) 여러 개의 선택 옵션이 있기 때문에 name은 동일하게,
value는 다르게 주는 것이 좋습니다
chekbox
: 선택 할 수도 있고, 안할 수도 있는 경우에 사용됩니다
email
: email 정보를 보낼 때 사용됩니다
→ 유효하지 않은 email을 전송할 경우 error를 표시해 줍니다
file
: file을 보낼 때 사용됩니다
→ file은 post 방식으로 보내야 합니다
url
: url 정보를 보낼 때 사용됩니다
→ 유효하지 않은 url을 전송할 경우 error를 표시해 줍니다
color
: 색상 정보를 입력할 때 사용됩니다
date
: 날짜 정보를 입력할 때 사용됩니다
time
: 시간 정보를 입력할 때 사용됩니다
month
: 월 정보를 입력할 때 사용됩니다
number
: 숫자 정보를 입력할 때 사용됩니다
→ 최소값과 최대값을 지정할 수 있습니다
→ 숫자가 아닌 data를 전송할 경우 error를 표시해 줍니다
button
: 버튼을 생성할 때 사용됩니다

▶ 추가로 입력 data의 유효성을 검사하는 것을 validation이라고 합니다 😊

우리는 이번에 <input>의 type 속성 중 submit에 대해서 알아볼 예정입니다 🤔

방금 전 우리는
해당 페이지를 처리할 수 있는 웹 페이지로 전송해주는 type 속성이 submit이라는 것을 배웠습니다

그렇다면 해당 페이지를 처리해주는 웹 페이지는 HTML로 작성되었을까요?
정답은 ❌ 입니다 !

왜냐하면 이를 처리할 수 있는 웹 페이지는 주로 서버측 프로그래밍 언어(PHP, ASP, Java, Python, Ruby, Node.js)로 작성되어있기 때문입니다

그렇기 때문에 submit을 사용할 때는 단순히 submit만 아는 것이 아닌
action이라던지 정보 전달 방법(post, get)등도 알아야 합니다 😊
(걱정하지 마세요! 이번 시간에는 HTML만 배우는 것이기에, 깊게는 안들어갈거 랍니다 😃)

<참고> 아래 표는 알아두면 좋을 것 같아서 작성해두었습니다

get	직접 전달, data 노출, 보낼 수 있는 data 용량이 제한됨
post	택배 배송, data 은닉, 큰 용량의 data도 보낼 수 있음

<div> : division의 약자로 element들을 구분시켜주는 태그입니다
<span> : 특정 text를 구분시켜주는 태그입니다

block 형식	자동 줄바꿈, 전체 폭을 사용함, <h1>, <p>, <div>
inline 형식	일렬로 배치됨, 지정폭을 사용함, <img>, <input>, <span>