<form> 태그
속성
action = "URL" -> 홈 데이터를 전달받아 처리할 페이지의 URL
method="get" --> URL에 이름과 값의 형태로 포함되어 전송,
보안이 중요하지 않은 데이터 전달에 사용
이전페이지 버튼을 통한 이동 가능
데이터 길이 최대 2048글자
method="post" --> http request 헤어 속에 포함시켜 전송
보안이 필요한 로그인정보, 회원정보 등의 전송에 사용
이전페이지를 누르면 데이터를 다시 보내야 한다는 경고 표시
길이 제한 없음
ex)
<body>
<form action = "login.jsp" method = "post">
아이디 : <input type = "text" name = "id"><br/><br/>
비밀번호 : <input type = "password" name = "pwd">
<input type = "submit" value = "로그인">
</body>
- <input> 태그 : 사용자 데이터의 입력을 위한 타입 지정
ex) <input type = "입력필드 유형" 속성 = "값">
속성값 : text, radio, checkbox, hidden, file, image, submit, reset, button
추가 : search, tel, url, email, number, range, color
<input type = "radio"> : 오직 1개의 항목만을 선택
<input type = "checkbox"> : 여러개 항목 동시에 선택 가능
<input type = "submit" value = "로그인"> : 전송
<input type = "reset" value = "다시 입력"> : 초기화
<input type = "file"> : 파일을 선택하는 버튼 생성
속성 : accept = "파일유형", multiple --> 하나 이상 값
<input type = "image"> : 이미지를 제출 버튼으로 만들 때 사용
<input type = "button"> : 클릭을 통해 명령을 수행하기 위한 버튼 생성
<button> 태그 : 클릭 가능한 버튼을 정의하는 태그
** input type = "button"의 경우 텍스트로만 value를 줄 수 있음
<input type = "search" name = "search" value = "값">
-> x 표시 클릭해서 텍스트 초기화 가능
<input> pattern 속성
입력 값에 대한 유효성 검사를 위한 정규 표현식을 지정
정규 표현식 : 특정한 규칙을 가진 문자열을 표현하는데 사용하는 수식
<input type = "url"> : 유효성 검사 자동으로 해준다
<input type = "email"> : 유효성 검사 자동으로 해준다
<input type ="number"> : 특정 범위의 숫자 입력
<input type = "range"> : 특정 범위의 숫자 입력
속성 : min, max, step(유효간격), value
<input type = "color"> : 색상표를 통한 입력
- <textarea> 태그 : 여러 줄에 해당하는 텍스트를 입력 받을 때 사용
<textarea rows = "" cols = "" wrap = "속성값">
--> rows 세로, cols 가로
<select> 태그 : 드롭다운 리스트를 만들 때 사용
<option> 태그 속성 : disabled, label, selected, value
<datalist> 태그 : 옵션 목록을 지정
포커스를 받으면 미리 입력한 옵션이 드롭다운 형태로 표시
ex)
<input type = "text" list = "datalist_id">
<datalist id = "a">
<option value = "" lable = ""></option>
<option value = "" lable = ""></option>
<option value = "" lable = ""></option>
</datalist>
<optgroup> 태그 : <select> 태그 내에서 연관된 항목들을 그룹화
ex)
<select>
<optgroup lable = "a group">
<option value = "" lable = ""></option>
<option value = "" lable = ""></option>
<option value = "" lable = ""></option>
</optgroup>
<optgroup lable = "b group">
<option value = "" lable = ""></option>
<option value = "" lable = ""></option>
<option value = "" lable = ""></option>
</optgroup>
</select>
- <fieldset> : 폼에서 사용된 요소들을 그룹핑
<legend> : field set 내에서 사용
<label>
'문돌이의 IT > HTML&CSS' 카테고리의 다른 글
| [HTML 웹프로그래밍] CSS 속성 - 목록 속성, 테이블 속성 (0) | 2017.05.12 |
|---|---|
| [HTML 웹프로그래밍] CSS 속성 - background속성, 테두리속성 (2) | 2017.05.12 |
| HTML에서 멀티미디어 표현 (0) | 2017.04.17 |
| HTML에서 테이블 표현 (0) | 2017.04.16 |
| HTML 이미지삽입, 하이퍼링크삽입, <iframe> 태그 (0) | 2017.04.15 |