TIL(24.04.19)

출처:https://online.spartacodingclub.kr/enrolleds/66134275f7c0c6ab299bed92/rounds/661341fdd9c7e6af9aaf398d/roadmap

스파르타코딩클럽

오늘의 TIL

.

.

.

 

Form 작성하기

<form action="#" method="#">

</form>
# form 작성하기
# action="" method="" 이렇게 비워두고 작성해도 됨

 

> input을 이용해서 입력할 수 있는 곳을 만들어줘야 함

 

Form 태그 안에 input 요소 넣기

<form action="#" method="#">

		<input type="text" name="message">

</form>
# form 태그 안에 input요소 넣기

> 입력창이 생김

 

제출 버튼과 Label 넣기

<form action="#" method="#">

		<label for="message">메세지 입력</label>
		<input type="text" id="message" name="message">
		<button type="submit">전송</button>

</form>
# label for와 input id는 일치해야함
#→ 사실 기능동작과는 관계가 없지만, 동일하게 하면 label과 input을 묶어줄 수 있음
# label을 클릭해도 input이 선택되도록 할 수 있!

 

input 요소

- form에서 사용자의 입력을 받기 위해 사용

- type 속성에 따라 입력 동작 방식이 달라짐

> 지정하지 않을 경우엔 type=text로 인식

 

참고자료 : MDN 공식문서 (https://developer.mozilla.org/ko/)

 

데이터 전송에서 핵심은 속성 name

- name으로 서버에 데이터를 전달하고, 서버는 name을 보고 데이터를 판단

 

name 속성

form을 제출(submit)하면 name 속성에 설정된 값이 서버로 전송

- 서버에서는 name속성을 사용하여 값에 접근

> 즉, name속성이 없다면 서버가 데이터를 받을 수 없음

- name 속성의 값이 key가 되고, 사용자가 입력한 값이 value가 되어 전송됨