본문 바로가기
Web/Html

*매우매우중요 html 기본이자 기초 태그 4 label, input으로 데이터 전송하는 기초닦기

by 다니엘의 개발 이야기 2022. 9. 27.
320x100

form action은 통상 생각하는 '구글폼' 뭐 그런걸로 생각하면 되겠다.

즉, 데이터를 수집할 수 있는 기반이 되는 페이지의 연동을 배우는 것이다.

 

따라서 매우매우중요하다고 볼 수 있겠다.

 

# 기본 설명

 

<form action="other.html">

<!-- label을 통해서 제작자가 어떤 생각을 하는지 표현해준다. 
일종의 주석이라고 보면 될것같다.-->

<!-- label for=안에 들어갈 아이디 값은 호출주소라고 보면된다. -->
<label for="fname">First name: </label>

<!-- br은 break의 약자로써, 같은줄에 출력되는 것을 br를 기점으로 끊어주고, br의 다음것은 다음줄로 내려버린다.
또 다른 활용도로는 쉽게 br하나당 엔터키 한번이라고 생각하면 된다. -->
<!-- label의 for안에 들어갈 참조 아이디값을 토대로 label은 input의 주석역할을하고
input은 어디 label의 짝궁인지 나타내주는 신호라고 보면 될것같다. -->
<!-- 마지막 요소로써 name을 추가해줌으로써 해당 input의 데이터를 어디로
전송해줄지 지정한다. -->
<input type="text" id="fname" name="fname"><br>

<br>

<label for="lname">Last name: </label>
<!-- input type='text'의 의미는 입력창을 의미한다. -->
<input type="text" id="lname" name="lname">
<!-- submit는 제출을 의미하고 활용하기에 따라서 검색버튼 정도로 생각해도 무방할것같다. -->
<input type="submit">



<br>
<!-- 앞선 text를 모두 입력하고 submit를 누르게 되면
form action에 걸어두었던 주소로 이동이 된다. -->
</form>


# 이메일, 비밀번호 정보 받기 기초

<form action="other.html">

<label for="email">Email: </label>
<!-- input의 type은 여러가지가 있으며, 해당 타입에 따라서만 input의 기능이 작동한다. -->
<!-- placeholder의 메세지는 input란에 무엇을 적을지 보여주는 힌트다. 그리고 무언가를 적으면 사라진다. -->
<input type="email" id="email" name="email" placeholder="email goes here"><br>

<label for="pw">Password: </label>
<input type="password" id="pw" name="pw"><br>

    <!-- submit에 해당하는 버튼의 문구를 value로 설정이 가능하다. -->
    <input type="submit" value="CLICK HERE">
</form>
300x250