from : 입력 값을 받을 수 있게 입력 폼(form)생성
기본 형식
<form action="#" method="get">
. . .
</form>
->action : form data를 서버로 보낼 때, 해당 데이터가 도착할 URL(#의 경우 Local host)
->method : form data가 서버로 제출될 때 사용되는 http 메소드 명시
-GET : URL 에 form data를 추가하여 서버로 전달하는 방식(길이 제한 있음)
-POST : form data를 별도로 첨부하여 서버로 전달하는 방식(길이 제한 없음)
input : 사용자에게 입력을 받을 수 있는 form 구성
<input type="Option" [name="이름 값" value="값"]>
※input 옵션
| 옵션 | 설명 |
|---|---|
| name |
입력 값 구분 이름 지정 |
placeholder |
미리 보기 텍스트 |
autofocus |
자동 커서 설정 |
value |
기본 값 지정 |
readonly |
읽기 전용 지정 |
maxlength |
글자 수 제한 지정 |
Input Option
1) text
텍스트 값을 입력 받음
<p>아이디 : <input type="text" name = "userID" placeholder="아이디를 입력하시오" autofocus></p>
<p>비밀번호 : <input type="password" name = "userPW" maxlength="10"></p>
<p>주소 : <input type="text" name = "userAdd"></p>
-name으로 변수처럼 사용 가능
※수행 결과
아이디 :
비밀번호 :
주소 :
2)checkbox
중복 값을 받을 수 있는 옵션
<p>좋아하는 커피를 모두 골라주세요.</p>
아메리카노 <input type="checkbox" value="ame">
카페라떼 <input type="checkbox" value="latte">
콜드브루 <input type="checkbox" value="coldbrew">
-각 체크 박스 설정 후 각기 다른 값(value ) 부여
-여러 선택지 선택 가능
※수행 결과
좋아하는 커피를 모두 골라주세요.
아메리카노 카페라떼 콜드브루-여러 값을 선택 하는 것이 가능하다.
3)radio
여러 값 중 단 하나의 값 만을 받을 수 있는 옵션
<p>성별을 골라주세요</p>
남자 <input type="radio" name = "gender" value="man">
여자 <input type="radio" name = "gender" value="woman">
-name 옵션의 설정 시 같은 이름으로 설정해야 한다.
-단일 선택만 가능
※ 수행 결과
- 둘 중 하나의 값만 선택이 가능 함
다른 형식의 입력 타입
-input 의 옵션이 아닌 자체적인 입력 폼(form)
값을 리스트처럼 형성하여 단일 값을 선택 하도록 하는 옵션
<select name="" id="">
<option value="naver">네이버</option>
<option value="daum">다음</option>
<option value="google">구글</option>
</select>
-여러 개의 Option 값 중 하나의 값만 선택이 가능하다.
※수행 결과
-'네이버','다음','구글' 을 리스트로 작성하여 하나의 값만 선택 할 수 있도록 만듦
2)input
-form 태그 내부의 지정/설정 된 값을 전송 하기 위한 트리거 키 생성
<!-- submit : form 태그 내부의 값 전송-->
<input type="submit" value = "보내기">
<!-- reset : form 태그 내부의 변수들에 대해서만 초기화 -->
<input type="reset" value = "다시쓰기">
- submit : form 태그 내부의 값의 전송에 대한 옵션
- reset : form 태그 내부 값들에 대해서만 초기화
※form 태그 시작에서 끝(<form> ~ </form>)에서만 reset이 적용 됨
※수행 결과
-text 타입 입력 후 [초기화] 클릭 시 입력 했던 값이 초기화됨
댓글
댓글 쓰기