로그인,회원가입 form 만들기

태그	설명
<a>	<a href="main.html" class="current">홈</a> download 속성: herf속성에 지정한 파일을 다운로드 할 수 있도록 설정 ping 속성: 링크를 클릭했을 때 정보를 자동으로 송신할 수 있도록 설정
<dbi>	텍스트의 출력 방향을 설정
<command>	사용자가 호출할 수 있는 명령을 나타낸다
<details>	사용자 요청에 따라 얻은 컨트롤이나 추가적인 정보를 표시
<summary>	details 요소의 하위 요소로써 머리말을 나타낸다
<datalist>	input의 list 속성과 함께 콤보 박스를 만드는 태그
<dialog>	대화를 의미 있는 콘텐츠로 만들고자 할 때 사용하며 대화상자 또는 창 을 나타낸다
<meter>	디스크 사용량 등과 같은 측정치를 표시하는 태그
<menu>	명령어 정의 또는 단축 메뉴들을 목록화한다
<output>	스크립트 등을 통해서 결과를 나타내는 태그
<progress>	다운로드할 때 얼마나 진행하였는지 보여주는 태그
<time>	날짜와 시간을 나타내는 태그

개인 정보 입력

이름
이메일
전화
파일선택

 

<form>
	<fieldset>
		<legend>개인 정보 입력</legend>
		<table>
			<tr>
				<td><label for="name">이름</label></td>
				<td><input type="text" name="name" id="name"
 				placeholder="이름을 입력하시오"
				required="required" 
				autofocus="autofocus" /></td>
			</tr>
			<tr>
				<td><label for="email">이메일</label></td>
				<td><input type="email" name="email" 
				id="email" required="required"
				placeholder="이메일을 입력하시오" />
			</td>
			</tr>
			<tr>
				<td><label for="phone">전화</label></td>
				<td><input type="text" name="phone" 
				id="phone" required="required"
				pattern="[0-1]{3}-[0-9]{4}-[0-9]{4}" 
				title="###-####-####"
				placeholder="전화번호를 입력하시오" />
			</td>
		</tr>
		<tr>
				<td><label for="photo">파일선택</label></td>
				<td><input type="file" name="photo" id="photo" 
				accept="image/gif, image/jpeg, image/png" />
				</td>
			</tr>
		</table>
		<input type="submit" value="제출" /> 
		<input type="reset" value="취소" />
	</fieldset>
</form>

로그인 화면

로그인 상태유지 회원가입     아이디/비밀번호 찾기

<form>
    <fieldset>
        <legend>로그인 화면</legend>
        <table>
            <tr>
                <td colspan="2">
                    <input type="text" name="id" id="id" placeholder="아이디" required="required" autofocus="autofocus" />
                    <input type="button" value="로그인" />
                </td>
            </tr>
            <tr>
                <td>
                    <input type="password" name="pas" id="pas" placeholder="비밀번호" required="required"/>
                </td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" name="loginCheck" value="on"/>로그인 상태유지<br>

                    <a href="member.html">회원가입</a> &nbsp;&nbsp;&nbsp;
                    <a href="#">아이디/비밀번호 찾기</a>
                </td>
            </tr>
        </table>
    </fieldset>
</form>

회원가입

아이디
비밀번호
비밀번호 재확인
이름
성별	남자 여자
생일
+82

<form>
    <fieldset>
        <legend>회원가입</legend>
        <table>
            <tr>
                <td><label for="id">아이디</label></td>
                <td><input type="text" name="id" id="id" placeholder="아이디를 입력하시오.(영문자와 숫자로 구성되며 6~12로 입력.첫글자는 반드시 영문자로 시작)" required="required" /></td>
            </tr>
            <tr>
                <td><label for="pw">비밀번호</label></td>
                <td><input type="password" name="pw" id="pw" placeholder="비밀번호를 입력하시오.(문자와 숫자,_로 구성되며 8~12로 입력)" /></td>
            </tr>
            <tr>
                <td><label for="repw">비밀번호 재확인
                </label></td>
                <td><input type="password" name="repw" id="repw" placeholder="비밀번호를 재입력하시오" /></td>
            </tr>
            <tr>
                <td>&nbsp;</td>
            </tr>
            <tr>
                <td><label for="name">이름</label></td>
                <td><input type="text" name="name" id="name" /></td>
            </tr>
            <tr>
                <td><label>성별</label></td>
                    <td><input type="radio" name="gender" value="man" /><label>남자</label>
                    <input type="radio" name="gender" value="woman" /><label>여자</label>
                </td>
            </tr>
            <tr>
                <td><label>생일</label></td>
                <td>
                    <input type="date" name="date" id="date" />
                </td>
            </tr>
            <tr>
                <td colspan="2"><input type="email" placeholder="본인확인 (이메일)" name="email" id="email" />
                </td>
            </tr>
            <tr>
                <td>&nbsp;</td>
            </tr>
            <tr>
                <td colspan="2">
                    <select name="countryCode">
                        <option value="+82">+82</option>
                    </select>
                    <input type="text" id="phone" name="phone" />
                    <input type="button" value="인증" id="countryCodeCheck" />
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <input type="text" id="certification" placeholder="인증번호" />
                    <input type="button" value="확인" id="certificationCheck" />
                </td>
            </tr>
            <tr>
                <td colspan="2" align="center">
                    <input type="submit" value="전송"/>
                    <input type="reset" value="취소" />
                </td>
            </tr>
        </table>
    </fieldset>
</form>