☆: .｡. o(≧▽≦)o .｡.:☆

FORM 이란 간단히 주로 로그인 하는 부분을 구현할때 사용된다. HTML <form> 요소는 사용자로부터 데이터를 수집하는 데 사용됩니다. 이를 통해 사용자로부터 입력을 받고, 이를 서버로 보내 처리하는 등의 작업을 할 수 있습니다. 아래는 기본적인 <form> 요소의 구조입니다:-)

1. FORM

다음 예시를 보자!

<form action="url_to_submit_data" method="post/get">
    <!-- 입력 필드들 -->
    <input type="text" name="username" placeholder="Username" required>
    <input type="password" name="password" placeholder="Password" required>
    <!-- 제출 버튼 -->
    <button type="submit">Submit</button>
</form>

• action: 양식이 제출될 URL을 지정합니다.
• method: 양식 데이터를 제출하는 HTTP 메소드를 지정합니다. 대부분의 경우 "post" 또는 "get" 중 하나를 사용합니다.
• <input>: 사용자 입력을 받는 입력 필드입니다. type, name, placeholder 등의 속성을 사용하여 필드 유형과 정보를 정의할 수 있습니다.
  -<button>: 제출 버튼을 나타냅니다.

2. Validation

HTML에서 유효성 검사를 수행하는 주요 방법 중 하나는 HTML5에서 도입된 내장 유효성 검사입니다. 이를 사용하면 클라이언트 측에서 간단한 유효성 검사를 수행할 수 있습니다.

<form action="url_to_submit_data" method="post" onsubmit="return validateForm()">
    <input type="email" id="email" name="email" placeholder="Email" required>
    <input type="password" id="password" name="password" placeholder="Password" required>
    <button type="submit">Submit</button>
</form>

<script>
    function validateForm() {
        var email = document.getElementById("email").value;
        var password = document.getElementById("password").value;

        // 간단한 유효성 검사
        if (email == "") {
            alert("이메일을 입력하세요.");
            return false;
        }
        if (password == "") {
            alert("비밀번호를 입력하세요.");
            return false;
        }
        return true;
    }
</script>

위의 예제에서 validateForm() 함수는 양식을 제출하기 전에 이메일과 비밀번호 필드가 비어 있는지를 확인합니다. 필요에 따라 더 복잡한 유효성 검사를 수행할 수 있습니다.

또한, JavaScript 외에도 HTML5에서는 다양한 유효성 검사 유형을 지원하는 <input> 요소의 type 속성을 사용할 수 있습니다. 예를 들어, type="email", type="number", type="url" 등의 유형이 있습니다. 이는 브라우저가 일부 기본적인 유효성 검사를 처리할 수 있게 합니다.

HTML <form> 요소와 유효성 검사를 결합하여 사용자로부터 안전하고 정확한 데이터를 수집할 수 있습니다.

☆: .｡. o(≧▽≦)o .｡.:☆

다음에는 html emmet에 관해 알아보자~~