반응형
🚀 Forms
<Form>
- 폼은 정보를 입력하는 영역(ex. 로그인 아이디 비밀번호 입력, 회원가입 시 입력하는 양식)
- 폼 동작 방식
- 웹 페이지에 있는 form에 데이터 입력
- 웹 페이지 내 액션이 일어나게 되면 데이터는 웹 서버로 이동
- 웹 서버는 데이터를 처리하기 위해 APP 호출
- 필요에 따라 APP은 DB로 데이터 전송
- DB에서 CRUD 작업이 일어나고 작업 결과를 APP, WEB에 전송
- 웹 서버는 받은 결과를 Client 브라우저에게 보낸다.
- 폼의 속성
- action : 입력 값을 전송할 페이지를 나타냄
- method : 폼의 데이터를 전송할 방법을 정의한다. 속성에는 get과 post가 있다.
📌 CRUD는 Create, Read, Update, Delete의 약자이다
📌 GET VS POST
get : url로서 요청을 보낸다.(홈페이지 보여줘!! Read에 해당)
post: url이 아닌 body값으로 보낸다. (주로 Create에 해당)
* 이건 이해하기 쉬운 예시인데 get은 내가 사무실에서 과장님에게 과장님!!!! 이거 이거 하고!!! 이거 이거 할게요!!!라고 크게 소리치는 것과 같다. 이러면 목도 아프고 오래 말하기도 힘들어서 한계가 있고, 큰 소리로 소리지르기 때문에 주변 사람도 다 알 수 있다. 반대로 post는 포스트잇에 조용히 적어서 전달하는 것이다. 내용에 많은 걸 담을 수 있고 전해야 할 양이 많더라도 소리 지르는 것보단 적어서 전달하는 것이 훨씬 효율적이니까 ㅎㅎ 그리고 누가 들을 일도 없고!~!
<input>
- input은 폼 태그에 입력할 수 있는 공간을 만들어 주고, 사용자에게 정보를 입력 받는다.
- input의 속성
- type : 태그 모양을 변경할 수 있다. 아래에서 다룰 예정!!
- name : 태그 이름을 지정한다. 거의 이미지의 alt값과 유사 그냥 무조건 적어라!! backend와 통신할 때 key값이 되는 값!!
- readonly : 태그를 읽기 전용으로 한다.
- maxlength : 최대 글자 수를 지정
- minlength : 최소 글자 수를 지정
- required : 무조건 입력해야 함!! 안 하고 submit 누르면 경고창이 뜬다.(에러가 뜬다)
- autofocus : 웹 페이지가 로딩되면 autofocus를 준 태그로 focus!!
- placeholder : 로그인 창 보면 연한 색으로 아이디를 입력하세요. 본 적 있을 것이다. 이게 바로 placeholder!!
- pattern : 정규표현식을 사용하여 특정 범위 내의 유효한 값을 입력받을 때 사용.
- input의 타입
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>form</title>
</head>
<body>
<input type="text"><br>
<input type="email"><br>
<input type="password"><br>
<input type="tel"><br>
<input type="date"><br>
<input type="time"><br>
<input type="range"><br>
<input type="color"><br>
<input type="radio"><br>
<input type="checkbox"><br>
<input type="file"><br>
<textarea name="name" rows="8" cols="80"></textarea>
</body>
</html>
<label>
- input 태그를 설명하는 텍스트를 옆에 붙여 무엇을 입력해야 하는지 설명하는 것으로 사용하는 것도 좋지만!! 시각장애인 분들의 접근성을 생각해서 label요소는 필수로 사용하도록 합시다!! 따뜻한 html 행복한 css!
- label의 사용법은 두 가지가 있다.
<!--텍스트의 설명과 폼 입력 모두를 포함하는 방법-->
<label>
이름 :
<input type="text" name="name">
</label><!-- 폼 입력에서 분리하여 for 속성을 id 값과 같게 해서 사용하는 방식-->
<label for="myName">이름 : </label>
<input type="text" name="name" id="myName"><select>
- select 요소는 드롭다운 리스트 박스를 생성한다. 리스트는 option 태그를 사용해서 생성한다.
- select의 속성들
- multiple="multiple" 속성을 사용하면 여러 개의 option 요소를 선택할 수 있게 된다. widow는 컨트롤 키 mac은 커맨드 키를 누르고 해야 여러 개를 선택할 수 있다.
- size 속성을 통해 한번에 보여줄 수 있는 option의 개수를 조절 가능
- option의 속성들
- value 속성을 사용해서 서버에 전송할 값을 설정할 수 있다.
- selected 속성을 사용해서 그 요소를 기본으로 선택되게 할 수 있다. 설정하지 않으면 첫 번째 option이 선택된다.
<fieldset>
- fieldset 요소는 자식 요소로 사용되는 폼 컨트롤들을 그룹화한다. 즉 form 태그 내의 section이라고 생각하면 될 것 같다.
<legend>
- fieldset을 쓴다 legend도 쓰는 것을 강추!! 디자인적인 요소를 생각한다면 숨기더라도 작성하는 것을 추천한다. legend 태그는 section의 h2라고 생각하면 좀 더 쉽게 이해가 갈 것 같다.
<sup>, <sub>
- <sup> 태그는 윗 첨자, <sub> 태그는 아랫 첨자 (ex. <sup> : 제곱, <sub> : 화학식)
<button>
- 말 그대로 클릭 가능한 버튼을 나타내는 태그이다.
- 버튼 태그의 타입은 무조건 써주는 것이 맞다.
- submit : 버튼이 서버로 양식 데이터를 제출
- reset : form의 모든 값을 초기화시킵니다.
📌 input type="submit" vs button type="submit" 무엇을 써야 할까?
간단하게 정리하자면 더 다채롭고 멋진 버튼을 만들려면 button 요소를 우선적으로 고려해보아야 한다!
<textarea>
- 여러 줄의 text를 입력받을 수 있다.
- textarea의 주요 속성
- cols : 문자의 평균적인 넓이를 기준으로 보여줄 글자 수 설정. 언어마다, 글꼴마다 글자 수가 달라질 수 있음
- rows : texarea 입력 창이 기본적으로 보여줄 입력 줄 수를 의미. cols과 마찬가지!
<datalist>
- datalist는 select와 input을 섞어서 사용.
- input의 list 속성을 이용해 datalist 요소의 id 속성과 연결하여 사용.
- 기본적으로 선택할 수 있는 옵션을 제공함과 동시에, 사용자가 원하는 임의의 값을 입력받을 수 있도록!! (like 이메일 주소 입력창)
🦁 Form 과제 (구글 폼 클론)
링크 : https://alstjr5949.github.io/formPractice/
소스코드 : https://github.com/alstjr5949/formPractice
코드 피드백, 디자인 피드백 언제나 대환영!!!!! ㅎㅎ
🍓 하루의 회상
- 진짜 어제 일찍 잤는데도.. 오늘 상당히 피곤했다 뇌를 속이면서 공부했음 스프린트 회고도 했는데,, 너무 좋았다. 사실 혼자라면 생각하기 쉽지 않은 것들을 생각하게 된 계기가 됐는데 좀 더 확실한 목표를 잡게 됐던 것 같다. (4 멍 1 냥이들과 얼굴 보며 말한 게 가장 좋았음^^)
- 오늘은 일찍 자야지.. 후 내일을 위해서 파이팅
- form에 대해서 좀 확실히 알게 된 것 같다.. ㅎㅎㅎ 뿌듯!!
반응형
'멋사 프론트엔드 스쿨 2기' 카테고리의 다른 글
| 멋사 프론트엔드 스쿨 2주차 회고 (2) | 2022.04.11 |
|---|---|
| 멋사 프론트엔드 스쿨 2기 TIL (04.05) (0) | 2022.04.05 |
| 멋사 프론트엔드 스쿨 2기 TIL (04.01) (0) | 2022.04.03 |
| 멋사 프론트엔드 스쿨 2기 TIL (03.31) (0) | 2022.03.31 |
| 멋사 프론트엔드 스쿨 2기 TIL (03.30) (0) | 2022.03.31 |
댓글