뚝딱햄 탈출기

[html] 로그인 화면 만들기 : form, input, label, button, submit 본문

web

[html] 로그인 화면 만들기 : form, input, label, button, submit

hyrmzz1 2023. 10. 8. 00:08

<form>

<form> 의 자식 태그로는 button, input, label 등이 있다.

<input>은 반드시 <form> 내부에 작성해야 한다. form tag가 없으면 서버에 대한 데이터 제출을 처리하는 기본 제공 방법이 없어 양식 데이터가 수집되지 않고 어디로도 전송되지 않는다.

 

input tag는 label tag과 주로 같이 사용되는데, 두 tag를 연결하려면 label의 for 속성과 input의 id 속성을 동일하게 작성하거나, label tag의 자식으로 input tag를 두면 된다. (<label>과 <input>을 연결하면 label 클릭시 input 바로 작성할 수 있게 포커스가 이동한다.)

<button> vs <input type = "submit">

<button>은 클릭 가능한 버튼이다. type 속성으로는 submit(default. 데이터 제출), reset(초기화), button이 있다.

<button>을 사용할 때는 type을 습관적으로 명시하는게 좋다. 현대의 브라우저 context에서는 <button>이 다양한 용도로 사용되고, 브라우저마다 다른 type을 기본값으로 사용할 수 있기 때문에 HTML 문서를 보고 <button>의 역할을 파악하기 어렵기 때문이다.

 

<button>과 <input type = "submit">은 폼 데이터를 서버에 전송하는 제출 버튼으로, 둘다 같은 버튼 모양으로 나타난다.

두 tag의 차이점은 <button>은 tag 내부에 내용을 표현할 수 있고, <input type = "submit">은 tag 내부에 내용을 표현할 수 없다는 점과,
button tag는 여는 태그(<button>)와 닫는 태그(</button>)를 모두 갖지만, input tag는 닫는 태그 없이 사용하는 self-closing tag라는 점이다.

 

 input tag는 self-closing tag이기 때문에 <input type = "submit" value = "로그인하기">와 같이 value 속성으로 텍스트를 넣을 수는 있으나, <img>나 <svg>와 같은 다른 노드를 추가할 수는 없다.
따라서 다른 노드를 추가해 더욱 다채로운 버튼을 만들고 싶다면 <button></button> 사이에 컨텐츠를 넣어 사용한다. (<input>을 사용한다면 css에서 background-image를 사용할 수도 있다.)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login page</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div>
        <div id="title">
            <h1>로그인 페이지</h1>
            <h3>아이디, 비밀번호를 입력해주세요</h3>
        </div>
        <form id="login">
            <div>
                <label for="id">ID : </label>
                <input type="text" id="id" placeholder="ID를 입력하세요" required>
            </div>
            <div>
                <label for="pw">PW : </label>
                <input type="password" id="pw" placeholder="비밀번호를 입력하세요" required>
            </div>
            <input type="submit" value="로그인하기">	<!-- <button>로그인하기</button> -->
        </form>
    </div>
</body>

</html>

위 코드 실행 결과

저작자표시 비영리 변경금지

'web' 카테고리의 다른 글

Ajax : 개념, 실습  (0) 2023.10.09
부트스트랩 Bootstrap : 개념, 실습  (2) 2023.10.08
웹의 동작 개념 : Web API, JSON  (2) 2023.10.05
[HTML][CSS] 구글 웹폰트 적용  (0) 2023.08.15
HTML, CSS, Javascript : CSS 선택자, CSS 사용법, JS 사용법  (0) 2023.08.15
'web' Related Articles more
Comments