[CodeLion] 03. HTML (Forms) 🦁

수딩·2022년 3월 31일

html 멋사TIL

☀️ Forms

1. `<form>`의 기본 속성

form 이란 정보를 입력하는 영역.

1-1. form 동작방식

웹 페이지에 있는 form 에 data 입력
웹 페이지 내 action이 일어나면 데이터는 웹 서버로 이동
웹 서버는 data를 처리하기 위해 APP 호출 . 이때 APP은 물리적으로 별도의 서버일 수도 있음
필요에 따라 APP은 DB로 data를 정송. 이때 DB는 물리적으로 별도의 서버일 수 있음
DB에서 CRUD 작업이 일어나고 작업결과를 APP으로, WEB으로 전송
웹서버는 받은 결과를 클라이언트 브라우저에 전송
사용자 브라우저는 Response 받은 페이지를 렌더링하여 사용자에게 보여준다.

간단히 말하면!
form 에 입력 -> submit 하면 데이터는 서버로 전송됨 -> 전송한 데이터는 웹 서버가 처리 -> 처리 후 결과화면같은 다른 웹페이지를 클라이언트에 전송

🤚 잠깐 ! CRUD 란?

: 대부분의 컴퓨터 소프트웨어가 가지는 기본적인 데이터 처리 기능을 일컫는 말
보통 백엔드 개발자들이 데이터 다룰때 사용

이름 : 조작 : SQL 순

Create : 생성 : Insert
Read : 읽기 : Select
Update : 갱신 : Update
Delete : 삭제 : Delete

사용자 인터페이스가 갖춰야할 기능을 가르키는 용어로도 사용

2. form 속성

2-1. action

: 입력값을 전송할 페이지

2-2. Method

: 폼의 데이터를 전송할 방법 정의

⭐️ GET & POST

method ="get" 정보값이 우리 눈에 보임
- 웹서버에 데이터를 요청할 때 사용하며, 주소에 데이터를 입력하는 방식
- 즉, url로서 요청을 보낸다.
- 담아갈 정보의 양이 방대할경우 지양.
  
  소리쳐서 데이터를 말한다고 생각해보면 , 내가 저쪽에 있는 친구한테 나는 이수빈이고! 배고파! 소리지르면 목아프고 ,, 다 들릴거고 ,, 조금의 정보밖에 주지 못한다. 라고 생각하면 이해 쏙쏙
method ="post" 로 하면 눈에 보이지 않음
- 노출되면 안되는 내용들을 post로 처리해준다
- 파일을 올리거나, 보안이 칠요한 데이터를 전송할 때 사용됨
- 주소에 입력 내용이 나타나지 않게 한다 (url이 아닌 body 값으로 보낸다.)
- CRUD 유저의 아이디를 생성하는 곳 으로 보내는 것
- 게시물 생성은 대부분 post 로 처리하는 편
- 방대한 양 다룰 수 있음
  
  포스트잇으로 정보를 친구에게 전달해주면 많은 내용을 전달할 수 있고, 시크릿하게 줄 수 있다! 이렇게 생각해보면 이해쏙쏙

둘의 차이점 ?
: Url 에 입력값 정보가 뜨는지 안뜨는지가 다름!

 <form action="./013_form의_원리.html" method="post">
    <input type="text" name="userId">
    <input type="password" name="userPw">
    <button type="submit">Login</button>
  </form>

버튼을 클릭하면 사용자가 입력한 정보(아이디,패스워드 등)를 action에 있는 곳에 정보를 보낸다.

3. input 속성과 type

3-1. 속성

type : text, radio 등
readonly : 읽기전용 설정
maxlength : 최대 글자 수 지정
minlength : 최소 글자 수 지정
required : 필수 태그로 지정. 입력하지 않으면 에러가 뜬다
autofocus : 페이지 로딩시 이 속성을 지정한 태그로 포커스가 바뀜
placeholder : 입력값에 대한 힌트
name : 필수적으로 있어야 함 (서버로 보내야하는 key), 겹치게 안하는게 좋다 ( 백엔드에 보낼 정보이기 때문에 백엔드분과 사전에 어떻게 할지 키값을 약속함)
value : 보낼 정보, 데이터

3-2. type

type의 종류는 이러하다. 겁나 많음!
근데 왜 쓰는건지?
-> 눌렀을 때 나오는 가상 키보드가 달라진다. 즉 입력양식이 달라진다!

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>form</title>
    </head>
    <body>
        <input type="text"><br>
        <input type="tel"><br>
        <input type="password"><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>

3-3. label

input 에는 반드시 label 값 줘야함!
두가지 사용법
1. label 안에 인풋
설명과 폼 입력 모두를 포함하는 방식
2. label 과 input 분리
폼 입력에서 분ㅣ하여 for 속성을 이용해 레이블 지정

4. `<select>` & `<option>`

select Dropdown 리스트 박스 생성
option 보기, 옵션
valur 값 무조건 넣어줘야함 - post로 보낼 정보

<form action="">
  <label for="myDevice">현재 사용하고 있는 스마트폰의 제조사를 선택해주세요</label>
  <select name="device" id="myDevice" multiple>
  <!--원래는 multiple="multiple"인데 두 값이 같을 땐 한번만 적어도 적용된다-->
    <option value="iphone">아이폰</option>
    <option value="galaxy">갤럭시폰</option>
    <option value="ㅜㅜ">LG폰</option>
  </select>
</form>

4-1. select 속성

multiple : 여러개의 옵션 선택 가능 (유저가 cmd 누르고 선택해야함)
selected
넘나 불편하고 구린 스타일은 CSS로 ..

4-2. option 속성

value : 선택값을 서버에 전송
selected : 기본적으로 선택되어있는 값
select option 선택하지 않고 전송하면 첫번째 option의 value값이 서버로 넘어가게 되는데 좋지 않겠쥬 ..? 그래서 첫번째 option 은 value = "0" , 선택으로 옵션을 넣어주는 편 (value 넣어주고싶지 않으면 value = "0" 줘도 됨)
required 도 넣어줘서 꼭 선택하게끔 한다!

    <select name="device" id="myDevice" required>
     <!--<option value="">선택</option>-->
      <option value="0">선택</option>
      <option value="iphone">아이폰</option>
      <option value="galaxy">갤럭시폰</option>
      <option value="ㅜㅜ">LG폰</option>
    </select>

5. `<fieldset>`

그룹화 하는 요소
form 내용을 구획화

<form action="">
  <fieldset>
    <legend>개인정보</legend>
    <label for="myName">이름</label>
    <input type="text" name="name" id="myName">
    <label for="myTel">전화번호</label>
    <input type="tel" name="tel" id="myTel">
    <label for="myEmail">이메일</label>
    <input type="email" name="email" id="myEmail">
  </fieldset>
  <fieldset>
    <legend>개인정보 제공 동의</legend>
    <label for="checkAgree">개인정보 제공에 동의하십니까?</label>
    <input type="checkbox" name="agree" id="checkAgree">
  </fieldset>
</form>

6. `<legend>`

filelset 바로 뒤에 위치해야한다 !! (반드시 첫번째 자식으로 사용해야 함)
폼 그룹의 목적을 나타내는 제목을 의미

7. `<button>`

클릭가능한 버튼
버튼의 모습을 다양하게 제어하고 버튼 내부에 다른 자식 요소를 추가하고 싶을때 사용
form 안에 button 있으면 enter 로 접근 가능!

7-1. button 의 type

submit : 버튼 클릭하면 서버로 양식 데이터 제출

  <button>버튼</button>

아무것도 쓰지 않으면 기본값이 submit 이다.

 <button type="submit">버튼</button>

그렇다고 type 생략하지 말기

⭐️ Input vs button 무엇을 써야할까?

둘 다 submit 기능을 하는게 똑같은데 둘 중 뭘 써야할까?

<input>은 닫는 태그가 없기 때문에 value 특성에 텍스트 값 밖에 지정할 수 없다.
<button>은 내부에 여러가지 자식 컨텐츠를 추가할 수 있고 여기 더해 ::after와 ::before 와 같은 가상 요소를 사용하는 것도 가능하다.

더 다채롭고 멋진 스타일을 적용해야 한다면 <button> 요소를 우선적으로 고려하면 된다!

8. `<textarea>`

: 여러줄의 텍스트 입력받을 수 있는 요소
이것도 당연히 데이터전송을 위해 사용됨

 <textarea name="" id="" cols="30" rows="10"></textarea>

cols 열 : 입력창의 넓이, 문자의 평균적인 넓이를 기준으로 함. 그래서 폰트마다 다르다! 보통 이걸로 설정안하고 CSS로 처리하는 편
(기본값 = 20)
rows 행 : 입력창 세로줄 수

9. `<datalist>`

: <select>와 <input> 을 섞어서 사용할 수 있도록합니다. <input> 의 list 속성을 이용해 <datalist> 요소의 id 속성과 연결하여 사용

<label for="solasystem">원하는 행성을 선택하세요 : </label>
<input type="text" id="solasystem" list="planets" name="planets">
<datalist id="planets">
    <option value="수성">수성</option>
    <option value="금성">금성</option>
    <option value="지구">지구</option>
    <option value="화성">화성</option>
</datalist>

이렇게 사용자에게 기본적으로 선택할 수 있는 옵션을 제공함과 동시에, 만약 이 안에 사용자가 선택할 수 있는 옵션이 없는 경우에 _직접 입력 가능하게끔 편의성 제공한다._

(이미지/내용 참고 및 출처 : 멋쟁이사자처럼)

보충설명

shadow DOM

수딩

Front-End Developer ✨

이전 포스트

[CodeLion] Git & Github 🦁

다음 포스트

[CodeLion] 03. HTML (Forms) 🦁

☀️ Forms

1. `<form>`의 기본 속성

1-1. form 동작방식

🤚 잠깐 ! CRUD 란?

2. form 속성

2-1. action

2-2. Method

3. input 속성과 type

3-1. 속성

3-2. type

3-3. label

4. `<select>` & `<option>`

4-1. select 속성

4-2. option 속성

5. `<fieldset>`

6. `<legend>`

7. `<button>`

7-1. button 의 type

⭐️ Input vs button 무엇을 써야할까?

8. `<textarea>`

9. `<datalist>`

보충설명

shadow DOM

[CodeLion] Git & Github 🦁

[CodeLion] 빔캠프님 CSS 특강 TIL🦁

0개의 댓글

관련 채용 정보

[CodeLion] 03. HTML (Forms) 🦁

☀️ Forms

1. <form>의 기본 속성

1-1. form 동작방식

🤚 잠깐 ! CRUD 란?

2. form 속성

2-1. action

2-2. Method

3. input 속성과 type

3-1. 속성

3-2. type

3-3. label

4. <select> & <option>

4-1. select 속성

4-2. option 속성

5. <fieldset>

6. <legend>

7. <button>

7-1. button 의 type

⭐️ Input vs button 무엇을 써야할까?

8. <textarea>

9. <datalist>

보충설명

shadow DOM

[CodeLion] Git & Github 🦁

[CodeLion] 빔캠프님 CSS 특강 TIL🦁

0개의 댓글

관련 채용 정보

1. `<form>`의 기본 속성

4. `<select>` & `<option>`

5. `<fieldset>`

6. `<legend>`

7. `<button>`

8. `<textarea>`

9. `<datalist>`