[html] form

XIXI·2022년 5월 4일

대구AI스쿨

목록 보기

11/57

🌱 link

✏️link 태그

<body>
    <!-- a
        - href : 링크의 목적지
        -target : 창 여는 형태 _self, _blank
    -->
    <ul>
        <li><a href="https://www.naver.com/" target="_blank">네이버</a></li>
        <li><a href="https://chrome.google.com/" taeget="_blank"><img src="" width="50px">구글</a></li>
    </ul>
    <br><br>
    <ul>
        <li><a href="#ch1">Where does thos spec fit?</a></li>
        <li><a href="#ch2">Is this html?</a></li>
    </ul>
    <!-- id, 중복 사용 불가능, 페이지 안에서 유일함 -->
    <p id="ch1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius delectus laboriosam ut quibusdam odit ea aliquam officia temporibus. Inventore debitis, nisi aut temporibus totam quae et molestias officiis eius enim.</p>
</body>

a 태그

href ➪ 링크의 목적지
target ➪ 창을 여는 형태
_self ➪ 열린 페이지 내
_black ➪ 새로운 페이지
id ➪ 중복 사용 불가능, 페이지 안에서 유일

✏️Form

<body>
    <!--
    [ 폼 태그 속성 ]
        name: 스크립트나 서버에서 from을 식별하기 위한 이름
        action: from데이터를 전송할 때 URL 지정
        method:  HTTP 요청 메소드(get, post)
            -get: 데이터를 URL의 일부로 전송 
            -post: 데이터를 본문으로 송신
        target: 웹 서버 응용프로그램으로부터 전송받은 데이터(HTML 문서나 이미지를 출력할 윈도우 이름)
    -->
    <form name="fo" method="get">
        아이디: <input type="text" size="15"><br>
        비밀번호: <input type="password" size="15"><br>
        <input type="submit" value="Log in"><br>
    </form>

    <!-- 폼 전송과정 -->
    <form name="sform"
        action="https://search.naver.com/search.naver"
        method="get">
    <input type="text" name="query">
    <input type="submit" value="검색">
    </form>
</body>

form

name ➪ 스크립트나 서버에서 from을 식별하기 위한 이름
action ➪ from데이터를 전송할 때 URL 지정
method ➪ HTTP 요청 메소드(get, post)
get ➪ 데이터를 URL의 일부로 전송(외부에 노출)
post ➪ 데이터를 본문으로 송신
target ➪ 웹 서버 응용프로그램으로부터 전송받은 데이터(HTML 문서나 이미지를 출력할 윈도우 이름)

✏️Form tag

자기소개서

<h3>자기소개서 작성</h3>
    <form>
        이름: <input type="text" value="" size="15"><br>
        암호: <input type="password" value="" size="15" maxlength="4"><br>
        자기소개서: <br>
        <textarea rows="5" cols="20" placeholder="여기에 입력하세요"></textarea>

자기소개서 form

maxlength ➪ 입력 글자 최대 길이
rows ➪ 행
cols ➪ 열
placeholder ➪ 입력 전 표시할 값, 데이터 입력 시 사라짐.

Datalist/Selected

<!-- 데이터 목록을 가진 텍스트 입력: datalist (자동완성기능) -->
<h3>선호과일</h3>
<input type="text" list="fruit">
	<datalist id="fruit">
		<option value="apple"></option>
		<option value="banana"></option>
		<option value="cheery"></option>
    </datalist>

먹고싶은 음식은
<!-- 콤보박스 만들기, selected 기본선택 -->
<select name="china">
	<option value="1">짜장면</option>
	<option value="2">짬뽕</option>
	<option value="3" selected>탕수육</option>
</select>

Datalist/Selected

data list와 콤보박스는 만드는 Select차이는

datalist ➪ 사용자 입력 가능
select ➪ 목록에서만 선택 가능
selected ➪ 표시 데이터 값, 선택율이 많은 데이터 경우 추가 선택의 빈도를 줄임.

Label 폼 요소 캡션

<!-- 라디오버튼 -->
<label><input type="radio" name="friut2">바나나</label><br>
<label><input type="radio" name="friut2" checked disabled>포도</label><br>  <!--checked disable 수정 불가능-->
<label><input type="radio" name="friut2">수박</label><br>
        
<label for="addr">사는 곳: </label>
<input type="text" id="addr">

<label>좋아하는 색깔은?</label><br>
<label>빨강<input type="checkbox" value="1"></label><br>
<label>파랑<input type="checkbox" value="2"></label><br>
<label>노랑<input type="checkbox" value="3"></label><br>

Label 폼 요소 캡션

label for="addr" , input type="" id="addr" 을 사용하는 경우 각각 영역이 하나의 영역임을 표현해주는 것.

name을 동일하게 적용하는 이유는 friut2을 다르게 주면 중복 선택이 됨. 때문에 같은 값을 주어서 하나만 선택할 수 있게 함.

label ➪ 선택 부분 뿐만 아니라 글자를 클릭해도 선택이 가능하도록

색 입력 태그

<!--
색 입력
#FFFFF (rgb => #rrggbb) / 0~255(8bit) / 0~FF
-->

<label>기타: <input type="color" value="#00BFF"
            onchange="document.body.style.color=this.value">
			<input type="checkbox" value="4"></label>

색 입력은
#FFFFF (rgb => #rrggbb) / 0~255(8bit) / 0~FF 등 다양한 방법으로 가능.

onchange="document.body.style.color=this.value" ➪ 전체 색상 변경

시간정보 태그

<h3>시간정보입력</h3>
    <input type="momth" value="2010-12"><br>
    <input type="week" value="2022-W30"><br>
    <input type="date" value="2012-01-01"><br>
    <input type="datetime-local" value="2012-01-01T06:10:10"><br>
    <input type="time" value="21:30"><br>

스핀버튼 슬라이드바

<!-- 스핀버튼과 슬라이드바 -->
<h3>홈 제어 시스템</h3>
<form>
	지속시간(0.0~10.0시간):
	<input type="number" min="0.0" max="10.0" step="0.5"><br>
	온도설정:10&deg;
	<input type="range" min="10" max="30" list="temp">30&deg;
		<datalist id="temp">
            <option value="12" label="Low"></option>
            <option value="20" label="Medium"></option>
            <option value="28" label="High"></option>
        </datalist>
</form>

<!-- 폼 요소 그룹핑 fieldset / legend(제목) -->
<h3>정보입력</h3>
<hr>
<form>
<fieldset>
  <legend>제목을 입력</legend>
    <input type="email" placeholder="id@host">
    <input type="url" placeholder="https://">
    <input type="tel" placeholder="010-0000-0000">
    <input type="search" placeholder="검색어">
    <input type="submit" placeholder="전송">
  </fieldset>
  <small>문의: Tel.010-0000-0000</small>
</form>
</body>

fieldset ➪ from 요소 그룹핑
legend ➪ 제목

✏️표 구조화

<body>
	<table>
		<caption>제주특별자치도 학교현황(2015.4.1 기준)</caption>
		<thead>
			<th>구분</th>
			<th>학교수</th>
			<th>학급수</th>
			<th>학생수</th>
			<th>교원수</th>
		</thead>
		<tbody>
			<tr>
				<td>유치원</td>
				<td>117</td>
				<td>252</td>
				<td>5,547</td>
				<td>474</td>
			</tr>
			<tr>
				<td>초등학교</td>
				<td>117</td>
				<td>252</td>
				<td>5,547</td>
				<td>474</td>
			</tr>
			<tr>
				<td>중학교</td>
				<td>117</td>
				<td>252</td>
				<td>5,547</td>
				<td>474</td>
			</tr>
			<tr>
				<td>고등학교</td>
				<td>117</td>
				<td>252</td>
				<td>5,547</td>
				<td>474</td>
			</tr>
		</tbody>
		<tfoot>
			<tr>
				<td>합계</td>
				<td>304</td>
				<td>3,347</td>
				<td>86,954</td>
				<td>6,111</td>
			</tr>
		</tfoot>
	</table>