웹사이트 접속시 커서 위치 선택 가능 여부?

웹사이트 접속시 커서 위치 선택 가능 여부?

QA

웹사이트 접속시 커서 위치 선택 가능 여부?

본문

안녕하세요.

어떤 사이트는 접속하면 로그인 아이디 입력하는 곳에 커서가 이미 가 있는데요.

그래서 사이트 접속하자마자 로그인을 하는 사람들은 많이 편리합니다.

 

이런식으로 홈페이지 만들 때 커서 위치를 조정 가능하다면

공부해볼만한 곳이나 참고할 만한 소스 같은 게 있을까요?

이 질문에 댓글 쓰기 :

답변 2

아래의 코드를 한번 참고를 해보세요..

 

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>로그인 페이지</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        form {
            background-color: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
        label {
            display: block;
            margin-bottom: 5px;
        }
        input {
            width: 100%;
            padding: 8px;
            margin-bottom: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        button {
            width: 100%;
            padding: 10px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        button:hover {
            background-color: #0056b3;
        }
    </style>
</head>
<body>
    <form action="/login" method="post">
        <label for="username">아이디:</label>
        <input type="text" id="username" name="username" required autofocus>
        
        <label for="password">비밀번호:</label>
        <input type="password" id="password" name="password" required>
        
        <button type="submit">로그인</button>
    </form>

    <script>
        // HTML5 autofocus가 지원되지 않는 브라우저를 위한 백업 스크립트
        document.addEventListener('DOMContentLoaded', (event) => {
            if (!('autofocus' in document.createElement('input'))) {
                document.getElementById('username').focus();
            }
        });
    </script>
</body>
</html>

 

 

 

답변을 작성하시기 전에 로그인 해주세요.
전체 125,089 | RSS
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT