Ruby's Diary

폼 만들기

<form>태그 - 폼 만들기

<form 속성="속성값">폼 요소</form>

<form>태그의 속성

속성을 통해 사용자가 입력한 자료들을 서버로 어떤 방식으로 넘길 것인지,

서버에서 어떤 프로그램을 이용해 처리할 것인지 지정

<form action="register.php">
	폼 요소
</form>

→ form 에 내용을 입력하고 전송 버튼을 눌렀을 때 register.php를 실행

autocomplete 속성 - 자동 완성 기능

검색창 또는 로그인 창에 내용을 입력할 때 이전에 입력했던 내용이 아래에 표시되는 것

이 기능을 '자동 완성 기능'이라고 하는데 이 기능을 autocomplete 속성을 이용할 수 있다.

기본 값은 "on"이며, "off"로 지정해 유출되면 곤란한 비밀번호나 일회용 인증번호 등은 자동 완성 기능을 끌 수 있다.

<form action="register.php" autocomplete="off">
	폼 요소
</form>

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

<input>요소 옆에 텍스트를 붙여 놓는 용도로 사용

1. <label>태그 안에 폼 요소를 넣는 방법 

<label>레이블<input ...></label>

2. <label>요소와 폼 요소를 따로 사용하고

<label>태그에는 for 속성을 이용하고, 폼 요소에서는 id 속성을 이용해 서로 연결시키는 방법 

<label for="id이름">레이블</label>
<input id="id이름" 속성="속성 값">

라디오 버튼과 체크박스에서 사용하는 <label>태그

<label>태그를 이용해 라디오 버튼이나 체크박스에 텍스트(label)를 연결해 놓았다면

텍스트만 터치해도 라디오 버튼이나 체크박스가 선택되어 사용이 훨씬 쉬워진다.

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

<fieldset 속성="속성값"> . . . </fieldset>

폼 안에서 여러 구역을 나누어 표시하려고 할때 <fieldset>태그와 <legend>태그를 사용

<fieldset>
	<legend>개인 정보</legend>
    <ul>
    	<li>
        	<label for="name">이름</label>
            <input type="text" id="name">
        </li>
    </ul>
    .
    .
    .
</fieldset>

사용자 입력을 위한 <input>태그

<input>태그는 폼에서 사용자 입력을 받기 위해 사용하는 태그

<input>태그 - 입력 항목 만들기

<input type="유형" 속성="속성값">

<input>태그의 type속성 (1)

type="hidden" - 히든 필드 만들기

히든(hidden)필드는 화면상의 폼에는 보이지 않지만

사용자가 입력을 마치고 폼을 서버로 전송할 때 서버로 함께 전송되는 요소

사용자에게 굳이 보여 줄 필요가 없지만 관리자가 알아야 하는 것을 히든 필드로 입력

<input type="hidden" name="이름" value="서버로 넘길 값">

type="text" - 텍스트 필드 만들기

폼에서 가장 많이 사용하는 요소로 주로 아이디나 이름, 주소 등 텍스트를 입력 할 때 사용

<input type="text" 속성="속성값">

텍스트 필드에서 사용하는 속성

type="password" - 비밀번호 입력란 만들기

사용자가 입력하는 내용이 화면에 표시되지 않고 ' * ' 이나 ' ● ' 로 표시된다

<input type="password" 속성="속성값">

type="search", type="url", type="email", type="tel" - 분화된 텍스트 필드

type="search" - 검색상자 만들기

<input type="search" 속성="속성값">

type="url" - URL 입력란 만들기

<input type="url" 속성="속성값">

이 필드에서는 반드시 'http://'로 시작하는 사이트 주소를 입력해야 함.

type="email" - 메일 주소 입력란 만들기

<input type="email" 속성="속성값">

이 필드를 사용하면 브라우저 자체에서 사용자가 입력한 내용이 메일 주소 형식에 맞는지 자동으로 체크해준다.

type="tel" - 전화번호 입력란 만들기

<input type="tel" 속성="속성값">

유효성 검증을하여 잘못 입력한 값이 (비싼) 서버단의 용량을 쓰지 못하도록 구분하여 사용한다!

type="date" - 날짜 표시하기

<input type="date" value="기본값" 속성="속성값">

달력에서 날짜를 선택했을 때 필드에 "yyyy-mm-dd" 형식으로 연도와 월, 일이 표시

type="number" - 숫자 입력하기

<input type="number" 속성="속성값">

사용자가 입력한 내용을 숫자로 인식함.

입력 창에 숫자를 직접 입력하는 것이 기본이지만 브라우저에 따라 스핀박스가 표시 되기도 한다.

<label>주문개수:</label><input type="number" min="1" max="5" value="1">개

min = 최소값 , max = 최대값, value = 기본값

<input>태그의 type속성 (2)

type="range" - 슬라이드 막대로 숫자 지정하기

<input type="range" 속성="속성값">

type="range"는 슬라이드 막대를 움직여 숫자 값을 입력

type="range"와 type="number"에서 쓸 수 있는 속성

type="color" - 색상 선택 상자 표시하기

<input type="color" value="기본색" 속성="속성값">

type="radio", type="checkbox" - 라디오 버튼과 체크박스 넣기

<input type="radio" 속성="속성값">

<input type="checkbox" 속성="속성값">

라디오 버튼과 체크박스는 여러 항목 중 원하는 항목을 선택할 때 사용하는 폼 요소

한 개만 선택하도록 할 경우 라디오 버튼을 사용

두 개 이상 여러가지를 선택해도 될 경우 체크박스를 사용

라디오 버튼과 체크박스에 사용하는 속성

type="file" - 파일 첨부하기

<input type="file" 속성="속성값">

웹 브라우저 화면에 [파일선택] 또는 [찾아보기] 등이 표시되고 파일 첨부가 가능하다.

type="submit" , type="reset" - 서버 전송, 리셋 버튼 넣기

<input type="submit | reset" value="버튼 내용" 속성="속성값">

reset 은 <input>요소에 입력된 모든 정보를 재설정해 사용자가 입력한 내용을 모두 지움

submit은 사용자가 폼에 입력한 정보를 서버로 전송하는 역할

    <form action="registerPro.jsp" method="post">
        <ul>
            <li><input type="text" name="userid" placeholder="아이디 입력" autofocus></li>
            <li><input type="password" name="pwd" placeholder="비밀번호 입력"></li>
            <li>
                <input type="radio" name="gender" value="남자"> 남자
                <input type="radio" name="gender" value="여자"> 여자
            </li>
            <li>
                <input type="checkbox" name="hobby" value="영화감상"> 영화감상
                <input type="checkbox" name="hobby" value="운동"> 운동
            </li>
            <li><input type="file"></li>
            <li>나이: <input type="number" name="age" min="1" max="150"></li>
            <li>1 <input type="range" name="range" min="1" max="10"> 10</li>
            <li><input type="color" name="color" value="#FC0"></li>
            <li><input type="datetime-local" name="time"></li>
            <li><input type="date" name="date"></li>
            <li><input type="email" name="email" placeholder="이메일 입력"></li>
            <li><input type="url" name="url"></li>
            <li><input type="tel" name="tel"></li>
            <li><input type="search" name="word"></li>
            <li>
                <input type="submit" value="전송">
                <input type="reset" value="다시쓰기">
            </li>
        </ul>
    </form>

<input>태그의 다양한 속성

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

페이지를 불러오자마자 폼 요소 중에서 원하는 요소에 마우스 커서를 표시할 수 있음

placeholder 속성 - 힌트 표시하기

사용자가 텍스트를 입력할 때 입력란에 힌트 내용을 표시하고 있다가 그 필드를 클릭하면 내용이 사라지도록 하는 속성

텍스트 필드 앞에 제목(<label>태그 등)을 사용하지 않고도 사용자에게 해당 필드에 어떤 내용을 입력해야할지 알려줄 수 있어 편리

readonly 속성 - 읽기 전용 필드 만들기

입력란에 텍스트를 표시하는 것을 넘어 사용자가 입력하지 못하고 읽게만 만드는 기능

required 속성 - 필수 필드 지정하기

필수적으로 입력해야 하는 내용에는 required 속성을 지정해 필수 필드로 만들어 줌

    <form action="registerPro.jsp" method="post">
        <ul>
            <li><input type="text" name="userid" placeholder="아이디 입력" required autofocus></li>
            <li><input type="password" name="pwd" placeholder="비밀번호 입력"></li>
            <li>
                <input type="radio" name="gender" value="남자" checked> 남자
                <input type="radio" name="gender" value="여자"> 여자
            </li>
            <li><input type="email" name="email" placeholder="이메일 입력"></li>
            <li>
                <input type="submit" value="전송">
                <input type="reset" value="다시쓰기">
            </li>
        </ul>
    </form>

여러 데이터 나열해 보여주기

<select>, <optgroup>, <option> 태그 - 드롭다운 목록 만들기

사용자가 내용을 입력하는 것이 아니라 여러 옵션 중에서 선택하도록 하고 싶을 때 드롭다운 목록은 사용

<select 속성="속성값">
    <option value="값" 속성="속성값"> 내용1 </option>
    <option value="값" 속성="속성값"> 내용2 </option>
    ...
</select>

<option>태그의 속성

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h2>product order</h2>
    <div class="pf">
        <h3>personal information</h3>
        <input type="text" name="name" placeholder="이름 입력" autofocus required>
        <input type="tel" name="ptel" placeholder="연락처 입력" required>
        <div class="email-box">
            <input type="text" name="email-id" placeholder="이메일 아이디 입력">
            <select name="email-addr">
                <option value="@naver.com" selected>네이버</option>
                <option value="@daum.net">다음</option>
            </select>
        </div>
    </div>
</body>
</html>

기타 다양한 폼 요소들

<button>태그 - 버튼 넣기

<button type="submit | reset | button">내용</button>

<button>태그의 type 속성은 버튼이 활성화되었을 때 어떤 동작을 할지 지정

속성을 지정하지 않으면 submit으로 간주된다.

<input type="submit | reset | button">으로도 삽입할 수도 있음

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/login.css">
</head>
<body>
    <div class="wrap">
        <h2>login</h2>
        <p>로그인을 하시면 더욱 편리하게 이용하실 수 있습니다</p>

        <form action="loginPro.jsp" method="post">
            <ul class="login">
                <li>
                    <input type="text" name="id" placeholder="아이디를 입력하세요" autofocus required>
                    <input type="password" name="pwd" placeholder="비밀번호를 입력하세요" required class="no">
                </li>
                <li><button type="submit" class="submit">로그인</button></li>
            </ul>
        </form>
        
        <div class="box">
            <input id="ch-id" type="checkbox" value="check" class="checkid"> <label for="ch-id">아이디 저장</label>
        </div>

        <ul class="btn-group">
            <li><button onclick="findId()">이이디 찾기</button></li>
            <li><button onclick="findPwd()">비밀번호 찾기</button></li>
        </ul>
    </div>
</body>
</html>

<output>태그 - 계산결과

<output 속성="속성값">내용</output>

입력하는 값이 계산 결과라는 것을 브라우저에 알려줌

<progress>태그 - 진행 상태 보여주기

<progress value="값" max="값"></progress>

<progress>태그는 작업 진행 상태를 나타낼 때 사용하는 태그

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box { display:flex; align-items:center; }
        .box input { width:150px; margin:0 10px; }
    </style>
</head>
<body>
    <form class="box" onchange="result.value = parseInt(num1.value) + parseInt(num2.value)">
        <input type="number" name="num1" value="0"> + <input type="number" name="num2" value="0"> = <output name="result"></output>
    </form>
    <progress value="30" max="60"></progress>
</body>
</html>

4대 웹 콘텐츠
웹 콘텐츠는 텍스트, 이미지, 비디오, 오디오가 있으며, 웹 콘텐츠를 저장할 때 태그를 사용한다.

    <p>텍스트</p>
    <div class="box">이미지
        <img src="imgs/pelican.jpg" alt="팰리컨">
    </div>
    <video muted autoplay preload loop>비디오
        <source src="media/video.mp4" type="video/mp4">
    </video>
    <audio src="media/audio.mp3" muted cotrols>오디오

웹에서 사용하는 이미지 형식

1. GIF (Graphic Interchange Form)

2. JPG / JPEG (Joint Photographic Experts Group)

3. PNG (Portable Network Graphics)

이미지 삽입하기 <img>태그

<img src="경로" alt="이미지설명">

웹에 이미지를 삽입할 때 사용하는 태그

<img>태그의 필수 속성인 src에는 이미지의 경로를 입력하고, alt에는 이미지에 대한 설명을 입력 (웹 접근성 향상) 

스크린 리더에서 alt값을 읽어 알 수 없는 여러 오류들로 이미지를 표시할 수 없을 때 alt 텍스트 내용을 대신 가져와 보여줌

경로란?

절대 경로 : 이미지(리소스)가 원래 가지고 있는 절대적인 고유한 경로

ex) 웹 이미지 절대경로(http://www.naver.com/ruby.png), PC컴퓨터 절대경로(C:\user\ruby\ruby.png)

상대 경로 : 작성하는 파일의 위치가 경로의 시작점인 경로 (루트디렉토리)

ex) / 또는 상위 폴더 ../ 또는 하위 폴더 

하이퍼링크(hyperlink)란?

정보구조를 구성할 때 반드시 필요한 것이 '하이퍼 링크 기능'이다. 

하이퍼 링크 기능은 웹 페이지를 전환하는 기능이다. 

하이퍼 링크 기능은 <a> 태그로 구현한다.

링크 만들기 <a>, 속성 href

<a href="링크할 주소"></a>

요소(시작 태그 < + 웹콘텐츠 + 끝 태그 >) 유형은 세가지가 있다.

1. 블록형(block) 요소
너비값이 100%로 줄바꿈한다. 레이아웃 스타일시트 적용이 잘 된다.
ex) <img>, <a>, <input>, <label>, <span> 외 나머지

2. 인라인-블록형(inline-block) 요소
요소가 좌에서 우로 배치된다. 레이아웃 스타일시트 적용이 된다.
ex) <img>

3. 인라인형(inline) 요소
요소가 좌에서 우로 배치된다. 레이아웃 스타일시트 적용이 안된다.
ex) <a>, <input>, <label>, <span>

제목 태그 <hn>

<h1>제목</h1>

제목을 뜻하는 heading의 줄임말인 'h'와 제목 크기를 나타내는 숫자(1~6)을 사용하여

<h1> <h2> <h3> <h4> <h5> <h6> 으로 표현한다.

<h1> 이 가장 큰 제목, <h6> 이 가장 작은 제목 이다.

단락 만들기 <p>

<p>텍스트</p>

텍스트를 표시할 때 가장 많이 사용하는 태그

paragraph의 줄임말로 텍스트 단락을 만드는데 너비값에 따라 자동으로 줄바꿈 처리 된다.

줄 바꾸기 <br>

<br>

줄 바꿀 위치에 <br>태그를 사용, break의 줄임말로 닫는 태그가 없다. (단일태그)

줄바꿈 없이 영역묶기 <span>

<span>내용</span>

텍스트 단락 안에서 줄바꿈 없이 일부 텍스트만 묶어 스타일을 적용하려고 할 때 주로 사용

그 외 수평줄 넣기 <hr>태그, 인용문 넣기 <blockquote>태그, 입력하는 그대로 화면에 표시하기 <pre>태그,

굵게 표시하기 <strong>태그와 <b>태그, 이탤릭체로 표시하기 <em>태그, <i>태그, 인용 내용 표시하기 <q>태그,

형광펜 효과내기 <mark>태그, 동아시아 글자 표시하기 <ruby>태그, 아래 첨자 <sub>태그, 위 첨자 <sup>태그 등이 있다.

순서 없는 목록을 만드는 태그 : 목록태그 <ul>, 항목태그 <li>

<ul>
    <li>내용</li>
    <li>내용</li>
</ul>

순서가 필요하지 않은 목록(unordered list)를 만들 때 <ul> 태그를 사용

<ul> 태그 안에 <li> 태그(list item)를 사용해 각 항목을 표시

순서 있는 목록을 만드는 태그 : 목록태그 <ol>, 항목태그 <li>

<ol>
    <li>내용</li>
    <li>내용</li>
</ol>

항목을 나열하되 순서가 필요한 목록(ordered list)을 만들 때 <ol> 태그를 사용

속성값을 이용해 목록의 숫자와 순서를 지정해 줄 수 있음

표를 만드는 태그 <table>, 행 <tr>, 열 <td>와 <th> 태그

<table>
    <tr>
        <td>내용</td>
        <td>내용</td>
        . . . . . .
    </tr>
    . . . . . .
</table>

<table> 태그로 표 자리를 만듬 (stylesheet 적용O)

<tr>태그로 행을 만듬 (stylesheet 적용X)

<td>태그로 각 행마다 열을 만듬 (stylesheet 적용O)

<th>태그는 <td>대신 사용하여 칼럼의 제목을 굵게 표시할 수 있음

표 구조 정의 <thead>, <tbody>, <tfoot> 태그

table의 t와 제목 부분(head), 본문(body), 요약 부분(foot)이 합쳐진 태그이며,

표의 각 셀은 제목이 있는 부분과 실제 내용이 있는 본문

그리고 요약 부분이 있는 부분으로 표의 구조를 나누어 놓는 것이 좋다. 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>UI 요소 - 테이블</title>
    <style>
        table {border:3px dotted blue;}
        th {border:3px dashed orange;}
        td {border:3px solid red;}
    </style>
</head>
<body>
    <table cellpadding="0" cellspacing="0">
        <tr>
            <th>번호</th>
            <th>제목</th>
            <th>작성자</th>
            <th>작성일</th>
        </tr>

        <tr>
            <td>1</td>
            <td>제목 테스트01</td>
            <td>작성자01</td>
            <td>2023-08-10</td>
        </tr>
    </table>
</body>
</html>

웹 편집기(web editor) : 웹 문서를 작성하는 프로그램

ex) VScode 등

웹 브라우저(web browser) : 웹 문서를 보는 프로그램

ex) 인터넷 익스플로러(Internet Explorer), 엣지(Edge), 크롬(Chome), 파이어폭스(Firefox) 등

HTML 이란?

HyperText Markup Language 의 줄임말이다.

웹에서 자유롭게 오갈 수 있는 웹 문서를 만드는 언어

웹 표준(Web Standards)이란?

웹 사이트에 접속한 사용자가 어떠한 운영체제나 브라우저를 사용하더라도 동일한 결과를 보이게 한다.

따라서, 브라우저의 종류나 버전에 상관없이 모든 사용자들이 동일한 웹사이트를 볼 수 있도록 웹 표준 기술 작업이 필요하며 웹 표준 준수는 웹 접근성 준수를 위한 핵심이다.

웹의 사용성 및 접근성 보장

웹 표준 프로그래밍은 구조(structure)와 표현(stylesheet), 기능(functionally)으로 영역이 구분되어 있다.

웹 호환성(Cross Browsing) 이란?

웹 브라우저 버전, 종류와 관계없는 웹 사이트 접근

웹 접근성(Web Accessibility) 이란?

인적, 환경적 요인에 제약없는 웹 정보 접근

출처: http://www.smartebiz.kr/new/subpage02_02.html