프로그래밍/HTML5

1. HTML5를 이용한 간단한 웹폼화면 만들기

쇠주는참이슬 2012. 3. 20. 16:28
주로 봐야할 속성으로는
placeholder / autocomplete / autofocus / required 경우이고. 직접 만들어서 값을 안넣어본다던지 하면
각 컨트롤들이 어떻게 작동하는지 확인 가능
웹표준을 지키기 위해서 label for를 이용해서 input 타입 객체와 연결을 꼭 시켜주자.
나중에 접근성에서 문제를 발생시키지 않기위해서.







<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>무제 문서</title>
<style>
ul li{
list-style:none; 
}
ul li label
{
font-family:맑은 고딕;
}
</style>
</head>

<body>

<form>
        <fieldset>
            <legend>로그인 정보</legend>
                <ul>
                    <li>
                        <label for="userid">아이디</label>
                            <input id="userid" name="userid" type="text" required autofocus>
                        </li>
                        
                        <li>
                        <label for="pwd1">비밀번호</label>
                            <input id="pwd1" name="pwd1" type="password" required>
                        </li>
                        
                        <li>
                        <label for="pwd2">비밀번호 확인</label>
                            <input id="pwd2" name="pwd2" type="password" required>
                        </li>
                        
                        <li>
                        <label for="level">회원 등급</label>
                            <input id="level" name="level" type="text" readonly value="준회원">
                        </li>
                    </ul>
            </fieldset>
            
            <fieldset>
            <legend>개인정보</legend>
                 <ul>
                  <li>
                    <label for="fullname">이름</label>
                        <input id="fullname" name="fuulname" type="text" placeholder="5자미만 공백없이" required>
                    </li>
                    
                    <li>
                    <label for="email">메일주소</label>
                        <input id="email" name="email" type="email" placeholder="id@domain.com" required>
                    </li>
                    
                    <li>
                    <label pwd="tel">연락처</label>
                        <input id="tel" type="tel" name="tel" autocomplete="off">
                    </li>
                  </ul>
            </fieldset>
            
            <fieldset>
            <legend>숙련도(상,중,하)</legend>
                <ul>
                    <li>
                        <input id="skill" name="skill" type="range" min="1" max="3" step="1">
                        </li>
                    
                    </ul>
            </fieldset>
            
            <fieldset>
            <button type="submit"> 제출 </button>
            </fieldset>
        </form>
</body>
</html>