Jehyun Jung

Slowly Developing Myself

Input Forms

Form Tag in HTML

<body>
    <form class="hidden" id="login-form">
        <input required maxlength="15" type="text" placeholder="What is your name?"/>
        <button>Log In</button>        
    </form>
    <h1 class="hidden" id="greeting"></h1>
    <script src="app.js"></script>
</body>

Form Tag을 이용해서 여러 입력 양식들을 한번에 묶어서 전송하는 것이 가능하다. 추후에, form tag를 활용해서 GET, POST 방식으로 전송하는 것이 가능하고, 전송하고자하는 url 지정하는것도 가능하다. Input Tag를 이용해서 사용자로부터 입력을 받을 수 있다. 추가로 required, maxlength 와 같은 property를 이용해서 입력값을 검증할 수 있다.

const loginForm=document.querySelector("#login-form");
function onLoginSubmit(event){
    event.preventDefault()
}
loginForm.addEventListener("submit",onLoginSubmit);

form tag를 이용해서 input 값을 받게 되면 자동적으로 새로고침 기능이 실행된다. 하지만 이러한 기본 기능을 제한할 수 있는데, 이는 event handler로 전달된 object의 preventDefault를 실행하면 된다.

const username=loginInput.value;

Input tag로 전달된 input 값은 value값을 확이하면 된다.

LocalStorage

Browser에는 기본적으로 변수를 저장할 수 있는 local storage가 존재한다. 이 local Storage를 이용해서 사용자가 이전에 입력한 값들을 저장할 수 있다.

#localStorage에 값을 저장하고자 하면 아래와 같이, key, value를 인자로 전달하면 된다.
localStorage.setItem("username","123");
#localStorage에 저장되어 있는 값을 참조하고자하면 key를 인자로 주면 된다.
const userName=localStorage.getItem("username");

Input Form Using Local Storage

function showGreetings(username){
    //백틱를 이용해서 문자열과 변수를 쉽게 결합할 수 있다.
    greeting.innerText=`Hello ${username}`
    greeting.classList.remove(HIDDEN_CLASSNAME)
}

link.addEventListener("click",handleLinkClick)
const savedUserName= localStorage.getItem(USERNAME_KEY);

//기존에 localStorage에 저장되어 있는 값이 없는 경우 loginForm를 활성화하고
if(savedUserName === null){
    loginForm.classList.remove(HIDDEN_CLASSNAME)
    loginForm.addEventListener("submit",onLoginSubmit);
}
//localStorage에 값이 저장되어 있는 경우 바로 h1 tag가 노출되도록한다.
else{
    showGreetings(savedUserName)
}

ScreenShots

local Storage에 값이 없는 경우 아래와 같이 login form이 표시되고

locl Storage에 값이 있는 경우 아래와 같이 h1 tag가 출력된다.

References

link: nomadcoders

댓글남기기

참고