반응형
*비밀번호
비밀번호 type은 반드시 password로 사용.
그렇지 않으면 글자가 그대로 노출된다.
<label for="password">비밀번호: </label>
<input id="password" type="password" name="mb_pw">
*필수 사항과 옵션 사항 구분해주기.
필수 사항과 옵션 사항은 구분해준다.
<fieldset>으로 아이디 비번 메일 따위를 묶어준다.
fieldset에는 제목 성격의 <legend>타이틀</legend>을 넣어준다.
<form action="#" method="post">
<fieldset>
<legend>필수 입력 사항</legend>
<p>
<label for="name">이름: </label>
<input id="name" type="text" name="mb_name">
</p>
<p>
<label for="email">이메일: </label>
<input id="email" type="email" name="mb_email">
</p>
<p>
<label for="password">비밀번호: </label>
<input id="password" type="password" name="mb_pw">
</p>
<p>
<input type="submit" value="회원가입"/>
</p>
</fieldset>
<fieldset>
<legend>부가 입력 사항</legend>
<p>
<label for="birthdate">생년월일: </label>
<input id="birthdate" type="date" name="mb_date">
</p>
</fieldset>
</form>
*date
생년월일 type 은 date로 쓴다. 달력이 나온다.
IE에서는 안나오기 때문에 jqueryui.com에서 사이드메뉴에 Datepike에서 viewsorce제이쿼리 이용해서 코드 짠다.
7번 줄부터 15번 까지 copy
<head></head>사이에 붙여준다.
<head>
<meta charset="utf-8">
<title>회원가입</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(function () {
$("#datepicker").datepicker();
});
</script>
</head>
<body>
<p>
<label for="datepicker">생년월일: </label>
<input id="datepicker" type="text" name="mb_date">
</p><link rel="stylesheet" href="/resources/demos/style.css"> 데모의 스타일은 지워도 된다.
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> http:를 적어준다.
<label for="datepicker">생년월일: </label>
<input id="datepicker" type="text" name="mb_date">
for과 id 반드시 일치 시켜준다.
*select
미리 값을 정해두고 그 안에서만 선택 할수있게 만듬
<p>
<span>거주지를 선택해주세요.</span><br/>
<select name="mb_address">
<option value="서울시">서울시</option>
<option value="경기도">경기도</option>
<option value="충청도">충청도</option>
<option value="제주도">제주도</option>
</select>
</p>서울시를 클릭 하면 DB로는 value값이 넘어간다.
하나 또는 하나이상 선택 하는 체크박스
<p>
<span>취미는?</span><br/>
<label for="reading">독서</label>
<input id="reading" type="checkbox" value="독서" name="mb_interest">
<label for="travel">여행</label>
<input id="travel" type="checkbox" value="여행" name="mb_interest">
<label for="coding">코딩</label>
<input id="coding" type="checkbox" value="코딩" name="mb_interest">
</p>
반응형
'study > HTML' 카테고리의 다른 글
| html5에서 비디오 구현하기, 동영상종류, 브라우저 지원 현황 (0) | 2020.01.12 |
|---|---|
| 03 회원가입 폼 만들기, 체크박스, 라디오 버튼, 파일선택, 텍스트입력, 전송버튼 (0) | 2020.01.12 |
| 01 회원가입 폼 만들기, input, text, email (0) | 2020.01.10 |
| 이미지맵 사용하기, old is but goodies (0) | 2020.01.10 |
| 링크, anchor, 절대경로, 상대경로, 사이트내 파일연결하기 (0) | 2020.01.09 |
댓글