TIL22-01 html 간단한 페이지 작성

• html의 활용
  html로 간단한 로그인 페이지를 만드는 과제를 받았다.
  어렵지 않게 진행했고, 그러다가 로그인 페이지의 Id입력란과 같이 input값을 받을 때 비어 있는채로 제출 버튼을 누를시에 오류 메세지가 뜨도록 해야하는 부분에서 처음 접하는 부분이라 검색을 했다.
• 아래와 같이 제출 인풋에 value 값을 지정하고, 각각의 인풋 코드에 required를 넣어주면 된다.

<label for="firstname"><b>First name :<br></label></b>
        <input type="text" id='firstname' required/><br>
<input type="submit" value="제출">

• 제출시 입력값이 없을 때에 제출이 되지 않게 하려는 부분이 있었다.
• document.getElementById(아이디) id값을 이용해 해당 id의 객체를 이용하는 매써드를 사용하면 된다.

    <script>
        function done() {
            const elem = document.getElementById('firstname');
            const elem2 = document.getElementById('lastname');
            const elem3 = document.getElementById('email');
            if(elem.value.length == 0) {
                return false
            } else if (elem2.value.length ==0) {
                return false
            }else if (elem3.value.length ==0) {3
                return false
            } else {
                alert ('제출 완료');
            }
        }
    </script>

• id별로 받아온 밸류 값의 길이가 0이라면 제출을 중단 시키고, 아니라면 alert를 띄운다.
• 참고 : document의 개념과 관련된 매써드
• Document 객체
  Document 객체는 웹 페이지 그 자체를 의미한다.
  웹 페이지에 존재하는 HTML 요소에 접근하고자 할 때는 반드시 Document 객체부터 시작해야한다.

  메소드	설명
  document.getElementsByTagName(태그이름)	해당 태그 이름의 요소를 모두 선택함.
  document.getElementById(아이디)	해당 아이디의 요소를 선택함.
  document.getElementsByClassName(클래스이름)	해당 클래스에 속한 요소를 모두 선택함.
  document.getElementsByName(name속성값)	해당 name 속성값을 가지는 요소를 모두 선택함.
  document.querySelectorAll(선택자)	해당 선택자로 선택되는 요소를 모두 선택함.

• 출처 및 참고 사이트 : 링크텍스트