이번 포스트는 form태그, input 태그를 설명하고자 한다. form태그란 HTML 문서에서 사용자의
입력을 서버로 전달하는 기능이다. <form>태그에는 다양한 속성이 많은데 한번 확인해보자.
먼저 입력 양식은 다음과 같다.
<Form>태그
<form ation="서버 url" method=get, post"></form><form> 태그는 ation과 method 속성을 같이 사용해야 한다. action의 속성은 사용자와
상호작용으로 입력받은 값들을 서버 url과 통신하는 방법이다.
method속성에서 get과 post 방식은 전송할 때 송신 방법이다.
post방식은 보안이 요구되는 데이터를 전송할 경우 post방식을 사용한다.
보안 방식으로 전송하지 않아도 된다면 get으로 작성하면 된다.
<input> 태그
<input> 태그는 웹 기반 양식에서 사용자의 데이터를 받을 수 있는 대화형 컨트롤을 말한다.
즉, 평상시 로그인하려고 할 때 아이디와 패스워드 적는 문구를 만들어 낼 때 사용하는 게 <input>
태그라고 생각하면 된다. 작성 방법은 다음과 같다.
<input type="타입의종류" name="이름" value="값"><input> 태그의 속성들 중 name, value는 상황에 따라 선택하여 사용하면 된다. 꼭 사용할 필요는 없다.
<!DOCTYPE html>
<html lang="en">
<head>
<title>form, input, label</title>
</head>
<body>
<form action="#" method="get">
<input type="text" />
<input type="password" />
<input type="button" value="제출" />
</form>
</body>
</html>
코드를 실행할 경우 나오는 값이다.
<input tpye="text" /> 텍스트를 입력할 수 있는 박스가 생긴다.
<input tpye="password" /> 패스워드 형식의 텍스트를 입력할 수 있는 박스가 생기며
<input tpye="button" valute="제출"/> 버튼을 누를 수 있는 박스가 생기며, 그 박스 안에
들어갈 값은 제출이라는 값을 넣어달라는 형식이다.
이렇듯, input은 다양한 속성이 있기 때문에 상황에 맞게 작성을 하며
조금 공부가 필요한 태그이다.
<label> 태그
마지막으로 label태그에 대해서 알아보자. label 태그는 사용자 인터페이스 항목의 설명을 나타낸다.
label 텍스트는 텍스트 입력과 시각적으로 관련이 있을 뿐만 아니라 프로그래밍적으로도 관련이 있다.
대부분 form 태그 안에서 사용하는 상호작용 요소에 이름을 붙일 때 사용한다.
작성 방법은 다음과 같다.
<label for="userid">계정</label>
<input type="text" id="userid" />
<label for="userpw">비밀번호</label>
<input type="password" id="userpw" />
<label for="useremail">이메일주소</label>
<input type="email" id="useremail" />
<input type="button" value="제출" />
label 태그에는 암묵적인 방법과 명시적인 방법이 있습니다.
위의 코드값은 명시적인 방법으로 코딩을 한 것이며, 하단의 코드값은 암묵적인 방법으로 작성한 예시입니다.
<label>계정</label>
<input type="text" />
<label>비밀번호</label>
<input type="password" />
<label>이메일주소</label>
<input type="email" />
<input type="button" value="제출" />
결과는 똑같이 출력되지만 다른 점이 있다면 <label> 태그에 for 속성을 사용하지 않고 <input> 태그에
id속성을 사용하지 않는다는 점이 있습니다. 오늘날에 css와 html5로 발전되면서 암묵적인 방법을
많이 사용하고 있는 추세입니다. 하지만 어떤 걸 사용해도 크게 지장 없다는 점을 알아주세요
'Front-end Developer > HTML' 카테고리의 다른 글
| 8. [HTML] <a> 태그, <img> 태그를 사용하여 링크와 이미지 넣는방법 (0) | 2022.10.24 |
|---|---|
| 7. HTML 목록 만드는 태그 <ul>,<ol>,<li>,<dl> (0) | 2022.10.23 |
| 6.HTML의 부모, 자식, 형제 관계 / 줄 바꿈과 들여쓰기 (0) | 2022.10.23 |
| 4.HTML 태그를 사용하여 텍스트 만들기 <h>,<p>,<br>,<span> (0) | 2022.10.22 |
| 5. Html의 <div> 태그 (0) | 2022.10.22 |
