티스토리 뷰

2022/html

day02[form태그, input태그]

yanii 2022. 8. 31. 19:17

■form 태그
웹 페이지 내에서 사용자로부터 입력을 받을 때 사용하는 태그
사용자가 입력한 데이터를 다른 페이지로 전송할 때 form 태그를 사용한다.

<form action="" method="" name="">
          입력 태그
          입력 태그
           ...
</form>

- action : 데이터를 전송할 페이지의 경로(생략 시 현재 페이지)
- method : 데이터를 전송하는 방식(생략 시 get방식) //5가지 방식이 있음. JSP에서 다시 배움.
- name : form 태그의 이름을 설정(생략 시 이름 없음)

 


(입력 태그)
■input 태그
입력받기 위해 사용되는 태그,
데이터를 지정하여 전달할 때 사용하는 태그

■속성 attribute
type : 입력 종류를 설정
name : value의 key값
value : 사용자가 입력한 값(입력 전에 미리 값을 넣어줄 수 있다).
placeholder : 값은 아니지만 미리 출력해줄 문구를 작성할 수 있다.(value값X)
readonly : 수정할 수 없도록 하는 설정
required : 필수 항목(잘 안 씀)
maxlength : 글자 수 제한
...

■input 태그의 type

<input type="값">

*text : 텍스트 입력(작성한 텍스트가 눈으로 보임)
*password : 텍스트 입력(작성한 텍스트가 눈으로 안보임)
*radio : 여러 개 중 하나의 옵션만 선택 가능
*checkbox : 여러 개 중 다수의 옵션 선택 가능
*file : 파일 전송(첨부파일 업로드)
color : 색상 선택
email : 이메일 입력(골뱅이 포함 입력)
url : http://로 입력
tel : 핸드폰 번호 입력
date : 날짜 입력(브라우저 별로 캘린더의 스타일은 다를 수 있다)
number, min, max, step : 숫자 입력
range : 일정 범위 안의 값만 입력
search : 검색어를 입력
*button, submit, reset : 버튼, 전송, 초기화

■선택 입력
select 태그는 여러 개의 옵션이 '드롭다운 리스트'로 되어 있으며,
그 중 단 하나의 옵션만을 입력받을 수 있다.

<select name="">

       <option value>드롭다운 리스트 제목</option>
       <option value="">사용자에게 보여질 값</option>
       <option value="">사용자에게 보여질 값</option>
       <option value="">사용자에게 보여질 값</option>
       <option value="">사용자에게 보여질 값</option>
       <option value="">사용자에게 보여질 값</option>
       ...
</select>

■문장 입력
textarea 요소는 사용자로부터 여러 줄의 텍스트를 입력받을 수 있다.

<textarea cols="가로 글자 수 크기" rows="세로 행 크기">실제 값</textarea>

■fieldset
fieldset 요소는 관련있는 폼 필드 세트를 표시한다.
form 필드 세트는 form 내에서 관련 태그를 하나의 그룹으로 묶은 것을 의미한다.

■legend
fieldset 요소의 제목을 표시
묶음에 대한 설명을 할 때 사용한다.

'2022 > html' 카테고리의 다른 글

input태그와 button태그의 차이  (0) 2022.10.14
day01[web,tomcat설치,html요소]  (0) 2022.08.30
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG
more
«   2024/11   »
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
글 보관함