[HTML/CSS] form & input

🐳Coding apple HTML/CSS All-in-one : 기초부터 Bootstrap, SASS, 고급 animation 까지 강의를 보고 정리한 글입니다 🐳

💫 <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.