<form action="#" method="get"> </form>
<input type="submit" value="전송">
<p> <label for="id"> 아이디 </label>
<input type="text" id="id" name="id">
이런 모양이 나온다.아이디
<p> <label> 비밀번호
<input type="password" name="password" id="pw"> </label>
이런 모양이 나온다비밀번호
<p> <label> 연락처 뒷자리
<input type="text" name="phone1" id="tel" maxlength="3">
3-1. 근데 보통 연락처 같은건 type을 tel로 더 많이 받는거 같기도 하고
<input type="tel" name="tel1" id="tel1">
<p> <label> 성별
<input type="radio" name="gender" value="남성" checked="checked"> 남성
<input type="radio" name="gender" value="여성" checked="checked"> 여성 </label>
이런식이다성별 남성 여성
<p> <label> 취미 : <input type="checkbox" name="hobby1" value="독서"> 독서 </label>
<label> <input type="checkbox" name="hobby2" value="운동"> 운동 </label>
<label> <input type="checkbox" name="hobby3" value="영화"> 영화 </label>
이런 식이다취미 : 독서 운동 영화
<p> <input type="submit" value="가입하기">
<input type="reset" value="다시쓰기">
이런 모양이다.
<form>
으로 감싸줘야 한다.<form action="1_process01.jsp" name="member" method="post">
</form>
<form>
으로 제대로 묶어놨는지 확인해보자<body>
<h3> 회원 가입</h3>
<form action="1_process01.jsp" name="member" method="post">
<p> <label for="id"> 아이디 </label>
<input type="text" id="id" name="id">
<input type="button" value="아이디 중복 검사" id="id">
<p> <label> 비밀번호
<input type="password" name="password" id="pw"> </label>
<p> <label> 이름 </label>
<input type="text" name="name" id="name">
<p> <label> 연락처 뒷자리
<input type="text" name="phone1" id="tel" maxlength="3"> -
<input type="text" name="phone2" id="tel" maxlength="4"> -
<input type="text" name="phone3" id="tel" maxlength="4"> </label>
<p> <label> 성별
<input type="radio" name="gender" value="남성" checked="checked"> 남성
<input type="radio" name="gender" value="여성" checked="checked"> 여성 </label>
<p> <label> 취미 : <input type="checkbox" name="hobby1" value="독서"> 독서
<input type="checkbox" name="hobby2" value="운동"> 운동
<input type="checkbox" name="hobby3" value="영화"> 영화 </label>
<p> <input type="submit" value="가입하기">
<input type="reset" value="다시쓰기">
</form>
</body>
아이디 중복 검사 버튼의 경우 뭘 연결하거나 팝업창을 뜨게 하거나.. 그런게 아니라서 눌러도 아무 기능을 하지 않는다.
<form>
으로 묶어주는 것 부터 시작한다.<form action="2_process.jsp" method="post">
2.<fieldset>
으로 묶어주고 <legend>
로 제목을 달아준다.
<select>
블럭을 만들고 <option>
으로 내용을 넣어주는 것이다.<select name="phone1">
<option value="010">010</option>
<option value="011">011</option>
<option value="012">012</option>
<option value="013">013</option>
<option value="014">014</option>
3-1. 근데 옵션이 몇 가지 있는데
<option value="015" disabled> 015 </opthon>
<option vlaue="016" selected> 016 </option>
3-1. select
에도 옵션이 있다. 만약 화면에서 한번에 몇 개를 같이 보이고 싶다! 한다면 size로 갯수를 설정해주면 된다.
<select name="phone1" size="5">
과 같이 작성한다면 5개가 보여질 것이고
<select name="phone1" size="10">
과 같이 작성한다면 10개가 보이겠지.
<body>
<form action="2_process.jsp" method="post">
<fieldset>
<legend> select 태그로 연락처 수 정하기</legend>
<label> 연락처
<!-- size : 한번에 보일 갯수 -->
<select name="phone1" size="4">
<option value="010">010</option>
<option value="011">011</option>
<option value="012">012</option>
<option value="013">013</option>
<option value="014">014</option>
<!-- disabled : 보이긴 하지만 선택할 수는 없는 / 읽기 전용 같은 느낌 -->
<option value="015" disabled> 015 </opthon>
<!-- selected : 기본 선택 같은 느낌 -->
<option vlaue="016" selected> 016 </option>
</select> - <input type="text" maxlength="4" size="4" name="phone2"> -
<input type="text" maxlength="4" size="4" name="phone3">
</label>
</fieldset>
<br>
<fieldset>
<legend>성별을 목록 상자로 바꾸기</legend>
<select name="gender">
<optgroup label="성별">
<option value="female">여성</option>
<option value="male">남성</option>
</optgroup>
</select>
</fieldset>
</form>
</body>
- size를 4로 잡았더니 선택지 4가지가 기본적으로 계속 보이는 것을 확인 할 수 있다.
- 사용자가 선택하지 않는다면 목록상자는 기본값으로 016을 잡고 있는 것을 확인 할 수 있다. disabled 설정으로 잡아놓은 015는 클릭이 되지 않는다.
- gender의 경우 defalut를 설정하진 않았지만, 가장 첫번째로 작성해놓은 여성이 기본 선택 되어 있는 것을 확인 할 수 있었다.
는 간단하다. 예를들어 가페 가입창 같은 곳 보면 가입 동기나 인사 받으려고 메모장 같이 글을 쓸 수 있는 기입창이 있지 않은가. 그것이다
기본 값은<textarea>
와 </textarea>
태그 사이에 설정된다
입력 폼 안에 사용된 태그와 띄어쓰기가 그대로 출력됨
아래 코드는 총 30줄을 받을 수 있게 한다.
<fieldset>
<legend> 가입인사 </legend>
<p> 여러 줄 입력해주세요 </p>
<textarea rows="5" cols="30" name="comment" placeholder="입력"></textarea>
</fieldset>
가입인사
이런식으로 말이다.여러 줄 입력해주세요