form 태그
블록레벨, 온라인 서식(검색, 로그인, 회원가입 등)에서 입력한 값들을 처리하는 프로그램으로 전송할 때 사용하는 태그
사용예) <form></form>
속성 : action, method
1) action : 서식에서 작성한 값을 처리하는 프로그램의 주소(URL)를 지정
2) method : 서식의 값들을 서버 프로그램에 어떤 방식으로 전달할 것인지 정의. 방식은 get(검색), post(로그인,회원가입 등 중요한 정보 전송)방식 사용.
퍼블리싱 시, 개발자와의 원활한 협업을 위해 만들어놓는 것이 좋다. <form action="" method="" >
fieldset 태그
블록 레벨 요소. 양식 요소들을 그룹화 할 때 사용 (가로로 묶음)
자식요소로 <legend></legend> 사용하여 fieldset의 제목을 정의 한다.
사용예) <fieldset></fieldset>
코딩 예시)
<body>
<form action="#"method="post">
<fieldset>
<legend>로그인</legend>
<p>ID : <input type="text"></p>
<p>PW : <input type="password"></p>
</fieldset>
</form>
</body>
input태그
인라인블럭
사용예 ) <input></input>
속성 : type, id, placeholder
속성 type의 속성값
- text : 한줄짜리 글 입력 상자. maxlength 속성으로 최대 글자 수 제한 가능
- password : 비밀번호 입력 상자. 입력 내용 *로 표시
- radio : 라디오 버튼, 여러 개 중 하나만 선택 (요소의 name값이 같도록 설정해야 함). checked 속성 정의 시 해당 radio가 기본으로 체크되어 표시됨.
- checkbox : 체크 박스, 다중 선택 가능. checked 속성 정의 시 해당 checkbox가 기본으로 체크되어 표시됨.
- reset : 초기화 버튼, value 속성으로 버튼에 표시되는 텍스트 지정.
- submit (데이터 전송 기능) : 전송 버튼, value 속성으로 버튼에 표시되는 텍스트 지정.
- button(데이터 전송 기능) : 범용 버튼, value 속성으로 버튼에 표시되는 텍스트 지정.
- image(데이터 전송 기능) : 이미지 버튼, src, alt 속성 반드시 정의
- file : 첨부 파일
- hidden : 사용자에게 노출할 필요 없는 데이터 지정. 화면에 표시되지 않음 (프로그래머 사용)
- search : 검색 입력 상자
- email : 이메일 입력 상자
- tel : 전화번호 입력 상자
- color : 컬러 입력 상자
- number : 숫자 입력 상자. 숫자의 최솟값, 최댓값을 min, max 속성으로 지정 가능
- range : 슬라이드 바, 최솟값, 최댓값을 min, max 속성으로 지정 가능
textarea태그
인라인 블럭, 여러줄 텍스트 입력 상자 태그. 주로 사이트 약관같은 것에 사용.
사용예 ) <textarea></textarea>
속성 : rows, cols
rows : 텍스트 입력 상자의 행 개수 지정
cols : 텍스트 입력 상자의 열 개수 지정
select태그
인라인 블럭, 선택 목록 상자 태그
사용예 ) <select></select>
속성 : <select name="" id="">
<option></option>태그만 자식으로 올 수 있음
<option>태그에 selected 속성 정의 되면 해당 option이 기본값으로 설정됨 (selected 사용 잘 안하기도 함 - h)
option의 속성은 value. <option value=""></option>. value값은 개발자가 설정함.
※ 선택버튼(radio, checkbox)은 checked 인점 구별.
button태그
form 태그 안에서 작동한다.
사용예 ) <button></button>
속성 : type = 속성값 submit(default값), button, reset
button : 자체로는 아무런 이벤트가 없고 click 이벤트와 연결시켜서 자바 스크립트를 활용하는 방법을 많이 사용
submit : 폼을 제출하는 이벤트를 발생시킨다.
reset : 폼 안에 작성된 내용을 초기화
※ button태그와 input type=button 의 차이
1) button은 스스로 닫지 않는 태그, input은 스스로 닫는 태그
2) button은 하위 태그 추가 가능, input은 불가
3) 이미지 삽입 시에도 button 태그는img 태그로 해결. input은 img불가(css의 background-image사용).
이미지는 img 태그를 사용하는 것이 검색 엔진 최적화 등에 도움이 된다는 사실이 있다.
함께 참고하면 좋은 링크 : https://cocoder16.tistory.com/18
label태그
인라인 요소.
사용자 입력 태그 <input>, <textarea>, <select>들에 대한 제목을 정의하는 태그.
<label>태그를 사용자 입력 태그와 제목으로 연결하기 위해선, <label>태그의 for 속성 값과 사용자 입력 태그의 id속성값을 동일하게 정의해야 한다. 예시) <label for="id">아이디</label> <input type="text" id="id">
label 태그의 텍스트를 클릭하면 연결된 사용자 입력 요소로 포커스가 이동됨. <label>태그가 끝나면, 한줄 띄어진다.
사용예 )<label></label>
속성
placeholder : 입력 내용에 대한 힌트를 제공. 내용이 비어있는 상태에서 입력한 속성값이 표시됨.
예시) <p><label for="id">아이디</label><input type="text" id="id" placeholder="아이디" title="아이디입력" /<p>
readonly : 입력된 내용을 수정할 수 없도록 만들어주는 속성
댓글