Web & Internet [10] 입문 – input 태그

Presentation on theme: "Web & Internet [10] 입문 – input 태그"— Presentation transcript:

1 Web & Internet [10] 입문 – input 태그
2018년 11월 26일 박성진

2 HTML <input> 태그 사용자가 데이터를 입력 할 수 있는 입 력 필드를 지정한다.
<input> 요소는 사용자가 데이터를 입력 할 수 있는 입력 컨트롤을 선언하기 위 해 <form> 요소 내에서 사용된다. <input> 에는 종료 태그가 없다. DBLab Template by Suan

3 <input> 형식 및 속성들 type : 입력태그의 유행을 설정하는 속성
<input type=“text” name=“이름” value=“초기값”/> type : 입력태그의 유행을 설정하는 속성 name: 서버로 전달되는 이름을 설정하는 속성 value: 입력 태그의 초기값을 설정하는 속성 Type Name Definition text 기본 텍스트를 입력하는 창 생성 password 비밀번호 입력하는 창 생성 button 기본 버튼 생성 radio 라디오버튼 생성 checkbox 체크박스 생성 file 파일 선택하는 버튼 생성 image 이미지를 버튼처럼 사용 submit 서버로 제출하는 버튼 생성 DBLab Template by Suan

4 예제 1. Text / 비밀번호 필드 DBLab Template by Suan

5 선택자 radio 라디오 버튼은 일반적으로 그룹으로 표 시된다. 한 그룹의 라디오 버튼 하나만 동시에 선택할 수 있다.
한 그룹의 라디오 버튼 하나만 동시에 선택할 수 있다. checkbox 체크 박스는 활성화되었을 때 체크 된 사각형 상자로 표시된다. 사용자가 제한된 수의 선택 항목 중 하 나 이상의 옵션을 선택할 수 있게 하는 데 사용된다. DBLab Template by Suan

6 예제 2. radio/checkbox 입문속성
DBLab Template by Suan

7 주의! radio 속성에 name 이 다르게 설정하면, DBLab Template by Suan

8 File 입문속성 파일 선택 필도와 파일 업로드를 위한 “찾아보기” 버튼을 정의함.
여러 파일을 선택할 수 있는 파일 선택 필드를 정의하려면 “multiple” 속성을 추가 해야 함. DBLab Template by Suan

9 버튼 속성 클릭 가능한 버튼을 정의함. <button> 요소 안에는 텍스트, 이미지 같은 내용을 넣을 수 있다.
DBLab Template by Suan

10 좀 더 다양한 속성들 DBLab Template by Suan