HTML 7. Form tag(2)

rachel's blog·2021년 5월 5일

HTML

목록 보기

11/13

1-2. input(2)

⑫ <type="color" : 색상 선택자 표시하기
기본형 : <input type=color "value="기본색" " 속성="속성값">

<!doctype html>
<html lang="ko">
  <head>
     <meta charset="utf-8">
     <title> 웹 폼</title>
  </head>
  <body>
	<form>
		<fieldset>
			<legend>과 티셔츠 설문</legend>
			<p>올해 과 티(T)를 만들려고 합니다. 원하는 색상을 추천해 주세요.</p>
			<label>선호색상  <input type="color" value="#00ff00"> </label>
		</fieldset>

  </form>
  </body>
</html>

웹 폼 과 티셔츠 설문

올해 과 티(T)를 만들려고 합니다. 원하는 색상을 추천해 주세요.

선호색상

**⑭ <type="date"/type="month"/type="week" : 날짜 표시하기** 기본형 : <input type="date | month | week" "value="기본값" " 속성="속성값"> ``` date

조회기간 선택

```

**⑮ <type="time"/type="datetime"/type="datetime-local" : 시간 지정하기** 기본형 : <input type="time" | "datetime" | "datetime-local" "value="기본값" " 속성="속성값">

<!DOCTYPE html>

<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>time 속성</title>
</head>
<body>
	<form>		
		<h3>대관시간을 선택하세요(오늘)</h3>
		<label>시작 시간<input type="time" value="09:00" id="start1"></label>,
		<label>종료 시간<input type="time" value="18:00" id="end1"></label>    
    </form>
</body>
</html>

대관시간을 입력하세요

시작시간 종료시간

⑯ <type="submit"/type="reset" : 서버 전송, 리셋 버튼넣기
기본형 : <input type="submit" | "reset" value="기본값" " 속성="속성값">

<h4>메일링 리스트 등록</h4>
<label>메일 주소: <input type="email" name="mail">
  <input type="submit" value="제출">
  <input type="reset" value="다시입력">

time 속성

메일링 리스트 등록

메일 주소:

⑰ <type="button"> : 버튼넣기

time 속성

⑱ < type="file"> : 파일첨부하기

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>file</title>
</head>
<body>
    <form action="#" method="post">
        <p>여행가서 찍은 사진을 업로드 해 보세요.</p>
        <input type="file">
    </form>
</body>
</html>

file

여행가서 찍은 사진을 업로드 해 보세요.

1-3. input 태그의 다양한 속성

(1) autofocus 속성 - 입력커서 표시하기

(2) placeholder 속성 - 힌트 표시하기

(3) readonly 속성 - 읽기 전용 필드 만들기 (사용자가 내용 입력 불가)

(4) required 속성 - 필수 필드 지정하기 (입력하지 않으면 오류 메세지 팝업)


<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>attribute</title>
</head>
<body>
    <!-- 텍스트 필드에 입력 커서 표시하기 -->
    <form action="#" method="post">
        <h3>여름방학 특강 신청</h3>
        <fieldset>
            <legend>수강과목</legend>
            <label>영어회화(초급) <input type="text" name="speaking eng" value="오전 9:00~11:00" readonly></label>
        </fieldset>
        <fieldset>
            <legend>신청자</legend>
            <label>이름 <input type="text" autofocus required></label><br>
            <label>학번 <input type="text" placeholder="하이픈없이 입력"></label><br>
            <label>학과 <input type="text"></label>
        </fieldset>
    </form>
</body>
</html>

attribute

여름방학 특강 신청

수강과목 영어회화(초급) 신청자 이름
학번
학과

(5) min/max/step 속성 - 최소값/최대값/지정 범위내 숫자의 일정한 간격

[예제]: 기본값, 최솟값='10'이고, 최댓값='100', step='10'으로 하는 스핀박스를 만들어라.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>attribute</title>
</head>
<body>
    <!-- 텍스트 필드에 입력 커서 표시하기 -->
    <form action="#" method="post">
      <fieldset>
            <legend>교재 주문</legend>
            <p>교재 <input type="text" value="1" ></p>
            <p>워크시트 <input type="text" value="1"></p>
            <p>단체주문 <input type="number" value="10" min=10 max="100" step="10" ></p>
        </fieldset>
    </form>
</body>
</html>

attribute 교재 주문

교재

워크시트

단체주문

(6) size/ minlength/ maxlenth속성 - 길이, 최소길이, 최대길이 속성

size : 텍스트, 비밀번호, 검색 필드 등 한 줄 짜리 텍스트와 관련된 필드에서 화면에 몇 글자까지 보이게 할 지 지정
maxlength : 최대 몇글자 까지 입력할 수 있는지
minlength : 최소 몇글자 까지 입력할 수 있는지

2. <label>태그 - 폼 요소에 레이블 붙이기

label: 입력 창 옆에 붙여 놓은 텍스트를 일컫는 말, 레이블 태그 사용시 태그와 텍스트가 서로 연결되어 있다는 것을 알 수 있다.

      기본형 : <label>텍스트 <input type=""></label>
      기본형 : <label for="id이름">텍스트</lable>
               <input type="" id="id이름">

라디오버튼과 체크박스에서 label태그를 연결하면 텍스트만 클릭해도 체크박스가 선택되어서 사용자 입장에서 훨씬 편리해질 수 있다.

3. <fieldset>, <legend> 태그- 폼 요소 그룹으로 묶기

폼 안에서 여러 구역을 나눌 때 덩어리 역할. legend태그는 fieldset태그로 묶은 그룹에 제목을 붙여 준다.

4.<select>, <optiongroupt>, <optiont> 태그 - 드롭다운 목록 만들기

-드롭다운 목록 : 클릭했을 때 옵션들이 요소 아래쪽으로 펼쳐지는 목록
-<select>태그 : 드롭다운의 시작, 끝을 감싸주는 덩어리 역할
-<optiont>태그 : 원하는 항목들 나열. value속성값으로 서버로 넘기는 값 지정

기본형 : <select 속성="속성값">
          <option value="" 속성="속성값">내용1</option>
          <option value="" 속성="속성값">내용2</option>
          <option value="" 속성="속성값">내용3</option>
        </select>

* <select>태그의 속성 :
-size_ 화면에 표시될 항목의 개수 지정
-multiple_브라우저 화면에 여러개의 옵션 함께 표시/ ctrl누르면 여러 항목 선택가능

*<option>태그의 속성 :
-value_옵션을 선택했을 떄 서버로 넘겨지는 값
-selected_화면에 표시될때 기본적으로 선택되어 있는 옵션 지정

<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>dropdown</title>
</head>
<body>
    <h2>여름방학 특강 신청</h2>
    <form action="#">
    <fieldset>
        <legend>수강 신청인</legend>
        <p>학번 <input type="text"></p>
        <p>이름 <input type="text"></p>
        <p>학과
        <select name="" id="" size="4" multiple>
            <option value="architect" selected>건축공학과</option>
            <option value="mechenical">기계공학과</option>
            <option value="industrial">산업공학과</option>
            <option value="electronics">전기전자공학과</option>
            <option value="computer">컴퓨터공학과</option>
            <option value="chemical">화학공학과</option>
        </select>
          </p>
    </fieldset>
</form>
</body>
</html>

dropdown

여름방학 특강 신청

수강 신청인

학번

이름

학과 건축공학과 기계공학과 산업공학과 전기전자공학과 컴퓨터공학과 화학공학과

-<optgruop>태그 : 그룹의 덩어리가 여러개인 경우 option을 각각 비슷한 그룹끼리 묶어주는 태그 역할.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>dropdown</title>
</head>
<body>
    <h2>여름방학 특강 신청</h2>
    <form action="#">
    <fieldset>
        <legend>수강 신청인</legend>
        <p>학번 <input type="text"></p>
        <p>이름 <input type="text"></p>
        <p>학과</p>
        <select name="" id="class" size="4" multiple>
            <optgroup label="공과대학">
            <option value="architect" selected>건축공학과</option>
            <option value="mechenical">기계공학과</option>
            <option value="industrial">산업공학과</option>
            <option value="electronics">전기전자공학과</option>
            <option value="computer">컴퓨터공학과</option>
            <option value="chemical">화학공학과</option>
        </optgroup>
        <optgroup label="인문대학">
            <option value="management">경영학과</option>
            <option value="economics">경제금융학과</option>
            <option value="social">사회학과</option>
        </optgroup>
        </select>
    </fieldset>
</form>
</body>
</html>

dropdown

여름방학 특강 신청

수강 신청인

학번

이름

학과

건축공학과 기계공학과 산업공학과 전기전자공학과 컴퓨터공학과 화학공학과 경영학과 경제금융학과 사회학과

5. <datalist>, <option> 태그

-select대신 사용하면 데이터 목록 중에 값을 선택할 수 있음.

기본형 : <input type="text" list="데이터 목록 id">
        <datalist id="데이터 목록 id">
          <option> .... </option>
          <option> .... </option>
          <option> .... </option>
        </datalist>

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>datalist</title>
</head>
<body>
    <input type="text" id="interest" list="choice">
    <datalist id="choice">
        <option value="grammer">문법</option>
        <option value="voca">어휘</option>
        <option value="speaking">회화</option>
        <option value="listening">리스닝</option>
        <option value="watching news">뉴스청취</option>
</body>
</html>

datalist 문법 어휘 회화 리스닝 뉴스청취

rachel's blog

블로그 이전 : https://rachelslab.tistory.com/

이전 포스트

HTML 7. Form tag(1)

다음 포스트

HTML 7. Form tag(2)

HTML

1-2. input(2)

조회기간 선택

대관시간을 입력하세요

메일링 리스트 등록

1-3. input 태그의 다양한 속성

(1) autofocus 속성 - 입력커서 표시하기

(2) placeholder 속성 - 힌트 표시하기

(3) readonly 속성 - 읽기 전용 필드 만들기 (사용자가 내용 입력 불가)

(4) required 속성 - 필수 필드 지정하기 (입력하지 않으면 오류 메세지 팝업)

여름방학 특강 신청

(5) min/max/step 속성 - 최소값/최대값/지정 범위내 숫자의 일정한 간격

(6) size/ minlength/ maxlenth속성 - 길이, 최소길이, 최대길이 속성

2. <label>태그 - 폼 요소에 레이블 붙이기

3. <fieldset>, <legend> 태그- 폼 요소 그룹으로 묶기

4.<select>, <optiongroupt>, <optiont> 태그 - 드롭다운 목록 만들기

여름방학 특강 신청

여름방학 특강 신청

5. <datalist>, <option> 태그

HTML 7. Form tag(1)

HTML 7. form tag(3)

0개의 댓글