- <form>
from action=""에서 ""사이에 URL 삽입
input은 label로 감싸준다 > 닫지 않아도 되는 태그 (Ex: <br>, <hr>, <label>, <input>
코드 안에서 us 쓰다가 (abc)가 나온다면 이미 어디서 사용했다는 뜻
<label>을 밖에 쓰고 <input>을 써도 둘은 단단히 체결
<label>
<input>
실무에선 아래 방법으로 사용
- 용어 설명
<label for="user-name">이름</label>
<input type="text" id="user-name">
<: 앵클 브라켓
label, input: 태그
for, type: 프롬포티
user-name: 밸류 (변수)
text: 밸류 (키워드)
키워드들은 html에서 지정된 것이라 다른 단어로 사용 X
- fieldset 과 legend
fieldset: 박스를 그려주는 기능
legend: 필드셋의 박스 영역 중 제목을 부여해 가독성을 높여줌
- submit
input에서 사용하는 submit과 reset을 이용하여 버튼 만들기
type = ""에서는 submit
value = ''에서는 버튼 내용
type = ""에서는 reset
value = ''에서는 버튼 내용
- legend
시각적 박스 단을 나누는 것이다
실무에서 지켜줘야 할 때가 있음
- type =
<label for="mail">이메일</label>
<input type="email" id="mail">
여기서 text가 아니라 email로 한 이유
text로 하면 모든 고객 이메일을 이메일로 처리해야 하지만, email로 지정하면 이메일 처리를 해서 일의 수고가 줄어듬
<label for="phone">연락처</label>
<input type="tel" id="phone">
마찬가지로 tel로 하면 바로 고객 정보의 전화번호로 지정이 가능한 것
∴ 결국 데이터의 정보들의 type을 잘 지정해야 함
- required
필수로 적어야 하는 내용으로 기입하지 않은 채로 제출할 시 경고문 뜸
참고로 경고문은 API 이다
required는 필수 요소를 지정할 때 쓰는 명령어
이것은 프론트 엔드 개발자의 고유 지정 능력
● 실습 - Radio / Register / Data / Button
- radio
- checkbox - 체크 박스 (다중 선택)
- radio - 동그라미 박스(단일 선택)
개발자의 실력 - 사용자들의 편의성과 감성 터치가 가능해야 함/ 네이밍 센스 중요
밸류 - 변수의 네이밍 센스: 직관적으로 개발자가 알아들을 수 있는가, 글씨를 알맞게 줄여야 함
- 날짜 지정하기 (data, month, week)
data만 거의 사용
data 코드를 입력하면 자동으로 나오는 것을 API라고 함
API: Application Programming Interface
-register
password: 브라우저에선 안보이게
비밀번호와 비밀번호 확인
type은 password로 같아야 하지만 id는 달라야 함
버튼 (submit, reset)
methode "GET": 유저 보안이 "노출되도 상관없다"
methode "POST": 유저 보안이 "노출되도 상관안된다"
대문자가 나오는건 중요하다는 뜻
name: 다방면에서 활용함
(앵커에서 사용되면 앵커의 name이고, 버튼에서 사용되면 버튼의 name임 > 서로 다른 것을 의미)
실무에서 form 사용할 때 백엔드와 협업할 것
- id (20% 사용)랑 name (80% 사용)이 중요하고 남발하지 않는다
- 백엔드랑 소통해서 id를 사용할 지 name을 사용할 지 정한다 (백엔드에게 권한 있음)
● 실습 - Button 2 / File / Hidden / Placeholder
버튼 2 (button)
사용자가 뭔가 액션 취한다 - 이벤트
공지창 - 팝업을 열면 자동으로 닫기 버튼이 있다 (이것도 API)
placeholder
placeholder와 label은 절대 대신할 수 없기 때문에 placeholder를 단독으로 사용하지 않는다.
또한 보조적으로만 사용한다