[HTML] 6. Form 태그

 

1. input으로 시작하는 폼 요소들

input에 대한 설명문을 label태그로 지정하고 서로 연결해 주려면 label에는 for의 값을, input에는 id의 값을 일치시킴

 

<h3>1. input type="text" 주관식. 한 줄 글상자</h3>

        <p>

            최소값을 minlength="n", 최대값을 maxlength="n"으로 지정 가능<br>

            상자 길이는 size="n"으로 지정 가능

        </p>

        <label for="nm">name</label> <input type="text" id="nm" maxlength="20">

        <label for="bd">birthday</label> <input type="text" id="bd" size="10">

 

 

 <h3>2. input type="password" 주관식. 암호 글상자</h3>

            <label for="pw"> password </label><input type="password" id="pw" maxlength="12">

 

<h3>3. testarea ... / testarea 주관식.  큰 글상자</h3>

        <textarea cols=100 rows="10">지원동기</textarea>

 

 

<h3>4. input type="checkbox" 단일선택형 객관식/체크박스</h3>

        <p>체크박스와 라디오버튼은 초기값으로 지정할 항목에 checked(checked="checked")를 추가함</p>

        <p>

            자신 있는 과목은?<br>

           <label> <input type="checkbox" checked="checked">html</label>

           <label> <input type="checkbox" >jsp</label>

           <label> <input type="checkbox" checked="checked">java</label>

           <label> <input type="checkbox" >db</label>

           <!-- label로 input을 감싸주면 연결됨-->

        </p>

 

 

<h3>5. input type="radio" 단일선택형 객관식/라디오버튼</h3>

        <p>단일선택형이 되려면 선택지들끼리 name의 값을 일치시킴</p>

        <p>

            <label> <input type="radio" >html</label>

           <label> <input type="radio" >jsp</label>

           <label> <input type="radio" >java</label>

           <label> <input type="radio" >db</label>

        </p>

 

 

 

 

<h3>6. input type="submit/reset/button" 전송/취소/일반 버튼</h3>

        <input type="submit" value="전송"> <input type="reset" value="취소 ">

        <input type="button" value="버튼" onclick="alert('why?')">

        <h3>6-1. button... /button 전송용 버튼(취소/일반)</h3>

        <p> button 태그는 전송용이 기본</p>

        <p>

            <button>전송</button>

            <button type="reset">취소</button>

            <button type="button">눌러봐

                <img src="img/123.png" width="80" onclick="alert('냥')">

            </button>

           

        </p>

 

 

 

<h3>7. input type="image" 전송용 이미지</h3>

        <p>이미지 경로 src로 지정</p>

        <label> 야옹이 기운 솟아라~

            <input type="image" src="img/123.png" width="100">

        </label>

 

 

 

<h3>8. input type="file" 파일 전송용</h3>

        <p>경로는 src로 지정</p>

        <label>

        <input type="file">

        </label>

 

 

<h3>9. select .../select 공간절약형 객관식. 펼침목록(드롭 다운 리스트)</h3>

        <p> [9-1] 팀별 회의 시간은?

            <select>

                <option>1교시</option>

                <option>2교시</option>

                <option>3교시</option>

                <option>4교시</option>

                <option >5교시</option>

                <option>6교시</option>

                <option>7교시</option>

                <option>8교시</option>

               

            </select>

        </p>

        초기값으로 지정할 항목에 selected(selected="selected")를 추가함<br>

       

        <p>[9-2] 팀별 회의 시간은?

            <select>

                <option>1교시</option>

                <option>2교시</option>

                <option>3교시</option>

                <option>4교시</option>

                <option selected>5교시</option>

                <option>6교시</option>

                <option>7교시</option>

                <option>8교시</option>

               

            </select>

        </p>

        <p> [9-3] 다중선택형 multiple(multiple="multiple")를 추가함<br>

            팀별 회의 시간은?

            <select multiple="">

                <option>1교시</option>

                <option>2교시</option>

                <option>3교시</option>

                <option>4교시</option>

                <option >5교시</option>

                <option>6교시</option>

                <option>7교시</option>

                <option>8교시</option>

               

            </select>

        </p>

        <p> [9-4] 형태를 상자형으로 size="n"을 추가함<br>

            팀별 회의 시간은?

            <select size="5">

                <option>1교시</option>

                <option>2교시</option>

                <option>3교시</option>

                <option>4교시</option>

                <option >5교시</option>

                <option>6교시</option>

                <option>7교시</option>

                <option>8교시</option>

               

            </select>

        </p>

        <p> [9-5] 항목들을 그룹화<br>

            팀별 회의 시간은?

            <select>

                <optgroup label="오전">

                <option>1교시</option>

                <option>2교시</option>

                <option>3교시</option>

                <option>4교시</option>

                </optgroup>

                <optgroup label="오후">

                <option>5교시</option>

                <option>6교시</option>

                <option>7교시</option>

                <option>8교시</option>

                </optgroup>

            </select>

        </p>

        <p> [9-6] <br>

            팀별 회의 시간은?

            <select>

                <option>1교시</option>

                <option>2교시</option>

                <option>3교시</option>

                <option>4교시</option>

                <option >5교시</option>

                <option>6교시</option>

                <option>7교시</option>

                <option>8교시</option>

               

            </select>

        </p>

 

 

<html>

 <head>

  <title>iframe</title>  

 </head>

 <body>

  <h1>iframe -

  <small>브라우저의 특정영역 설정 후 다른 내용 넣기</small></h1>

 <p>&lt;iframe src="보여질 내용"&gt; ... &lt;/iframe&gt; <br>

  iframe의 크기는 width="n" height="n"로 지정하고<br>

  iframe에는 <b>name="abc"</b>를 링크 a에는 <b>target="abc"</b>로

  서로 값을 일치시켜 iframe안에 링크를 열 수 있음

 </p>

 

 <h2>iframe안에 불러올 수 있는 것들</h2>

  1. URL <iframe src="https://www.daum.net/"> </iframe> <br>

  2. 웹문서 <iframe src="test08.htm">

     iframe 지원 안하는 브라우저 사용자용 메세지</iframe> <br>

  3. 이미지

  <iframe src="123.png" width="640" height="360"> </iframe> <br>

  4. 동영상  

 <iframe src="frog.mp4" width="640" height="430"></iframe> <br>

  5. 텍스트파일

 <iframe src="text.txt" width="400" height="300"></iframe><br>

 

 <hr>

 <h2>iframe안에 링크 열기</h2>

 <nav>

  <a href="test01.htm" target="html-box">test01.htm</a>

  <a href="test02.htm" target="html-box">test02.htm</a>

  <a href="test03.htm" target="html-box">test03.htm</a>

  <a href="test04.htm" target="html-box">test04.htm</a>

  <a href="test05.htm" target="html-box">test05.htm</a>

  <a href="test06.htm" target="html-box">test06.htm</a>

  <a href="test07.htm" target="html-box">test07.htm</a>

  <a href="test08.htm" target="html-box">test08.htm</a>

 </nav>

 <iframe src="test01.htm" name="html-box" width="1000" height="600" >

 </iframe>

 

 </body>

</html>