mingling

WEB/HTML

[HTML] HTML강의 - ch03

밍글링글링 2017. 8. 22.
728x90

[ex01]

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>form</title>
</head> <!-- request 기본방식 get방식, head에는 메타데이터, body에는 업무내용 -->
<body> <!-- 입력화면을 만드려면 form이 무조건 있어야한다. -->
    <form action="#" method="post"> <!--get- query string으로서 URL이 되고 URL은 request head에 저장이된다)-->
        <ul> <!-- post- request body이 저장이 된다. -->
            <li>이름: <input type="text" name="userName"/></li> <!-- userName: 변수 -->
            <li><input type="submit" value="가입"/></li>
        </ul>
    </form>
</body>
</html>

 

[ex02]

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>fieldset</title>
</head>
<body>
    <form action="#">
        <fieldset>
            <legend>로그인 정보</legend>
            <ul>
                <li>아이디:<input type="text" name="userId" /></li>
                <li>암호:<input type="password" name="pw" /></li>
            </ul>
        </fieldset>
        <fieldset>
            <legend>회원 정보</legend>
            <ul>
                <li>이름:<input type="text" name="userName" /></li>
                <li>메일:<input type="email" name="email" /></li>
            </ul>
        </fieldset>
        <fieldset>
            <input type="submit" value="가입하기" />
        </fieldset>
    </form>
</body>
</html>
<!-- <fieldset>데이터들의 저장소 집합 구역으로 나누어짐 
<legend>fieldset의 제목을 쓸때 사용-->

 

[ex03]

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>로그인 정보</title>
</head>
<body>
    <form>
        <fieldset>
            <legend>로그인 정보</legend>
            <ul>
                <li><label>아이디<input type="text" id="id"></label></li>
                <li><label>암호<input type="password" id="pw"></label></li>
            </ul>
        </fieldset>
        <fieldset>
            <legend>개인 정보</legend>
            <ul>
                <li><label for="name">이름</label><input type="text" id="name"></li>
                <li><label for="email">이메일</label><input type="email" id="email"></li>
            </ul>
        </fieldset>
    </form>
</body>
</html>

 

[ex04]

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>fieldset</title>
</head>
<body>
    <form>
        <fieldset id="영어">
            <legend>
                수강 과목을 선택하세요<small>(1과목 선택 가능)</small>
            </legend>
            <ul>
                <li><input type="radio" name="spk" value="low" checked> 영어 회화(초급)</li><!-- 라디오박스의 파라미터는 String 값 한개. -->
                <li><label><input type="radio" name="spk" value="middle"> 영어 회화(중급)</label></li><!--name: 그룹 -->
                <li><!-- 좋은 코드 -->
                    <input type="radio" name="spk" value="high" id="engRadio">
                    <label for="engRadio">영어 회화(고급)</label>
                </li>
            </ul>
        </fieldset>
        
        <fieldset>
            <legend>
                관심분야는? <small>(다수 선택 가능)</small>
            </legend>
            <ul>
                <li><input type="checkbox" name="pre" value="grammar" checked>문법</li> <!-- 체크박스의 파라미터는 배열(String 배열)로 값이 넘어간다.(여러가지를 선택할 수 있기때문에.)-->
                <li><label><input type="checkbox" name="pre" value="voca">어휘</label></li> <!-- name: 데이터값 id: 객체 -->
                <li>
                    <input type="checkbox" name="pre" value="speak" id="preCheck"><label for="preCheck">회화</label>
                </li>
            </ul>
        </fieldset>
    </form>
</body>
</html>

 

 

[ex05]

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>input</title>
</head>
<body><!-- 테이블은 데이터를 출력하는 목적, 테이블을 디자인목적으로 X 데이터는 html, style은 css-->
    <input type="hidden" name="h" value="1"/> <!--사용자에게 감추고싶을때//서버에는 값을 넘겨주는데 감춰져서 사용자 입력을 할수없기 떄문에 무조건 value값을 써야함 -->
    <input type="text" name="t" value="1" size="10" maxlength="10"/><!-- size-텍스트크기, maxlength-글자제한, value-기본값 -->
    <input type="password" placeholder="password"/><!-- placeholder-입력값을 알아보기 위한 속성-->
    <input type="search" placeholder="search"/><!-- 스마트폰 돋보기로 검색가능. -->
    <input type="url" placeholder="url"/><!-- 스마트폰에서 .com -->
    <input type="email" placeholder="email"/><!-- 이메일 -->
    <input type="tel" placeholder="tel"/> <br><!--전화번호 -->
    
    <input type="number" min="1" max="5" value="1" step="2"/><!-- 기본값1, 2씩증가 최소값 1 최대값 5 음수값 가능, 숫자입력만 가능 -->
    <input type="range" min="1" max="3" value="2"/><!-- 입력범위 -->
    <input type="radio" />
    <input type="checkbox"/>
    <input type="color"/><br>
    
    <input type="datetime-local"/>
    <input type="date"/><input type="month"/><input type="week"/>
    <input type="time" value="09:00"/><br>
    
    <input type="file"/>
    <input type="submit"/><!-- form 안에서 사용가능 -->
    <input type="reset"/><!-- form 안에서 사용가능 -->
    <input type="image" src="img/login.jpg"/>
    <input type="button" value="버튼"/>
    <textarea> </textarea>
</body>
</html>

 

 

[ex06]

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>input attribute</title>
</head>
<body>
    <form>
        <input type="text" readonly /> <!-- 읽을수만 있게 value 속성이 있어야한다. 텍스트테두리는 css에서 없앨 수 있다.-->
        <input type="text" autofocus /> <!-- 초기화면 깜빡깜빡하게 여러개가 사용될 경우 처음나온 autofocus에 적용된다.-->
        <input type="text" placeholder="주소" /> <input type="text" autocomplete="off" /><!-- 자동완성기능 -->
        <input type="text" required /> <!-- 필수입력란. -->
        <input type="submit" />
    </form>
</body>
</html>

 

[ex07]

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>dropdown</title>
<!-- select 속성 이용. -->
</head>
<body>
    <form action="#">
        <select name="num">
            <option value="1">가</option>
            <option value="2">나</option>
        </select>
        
        <select name="chr">
            <option>가</option>
            <option>나</option>
        </select> 
        <input type="submit"/>
        
        <select size="2">
            <!-- 처음시작 select창이 2개를 보여준다. -->
            <option value="1">가</option>
            <option value="2">나</option>
        </select> 
        
        <select multiple>
            <!-- option을 여러가지 선택가능. String 배열값으로 넘어간다. -->
            <option value="1">가</option>
            <option value="2">나</option>
        </select>
        
        <select>
            <option value="1">가</option>
            <option value="2" selected>나</option>
            <!-- 초기화면에 선택한 옵션이 우선 출력된다. -->
        </select> 
        
        <select>
            <optgroup label="공대">
                <option value="건축">건축학과</option>
                <option value="기계">기계학과</option>
            </optgroup>
            <optgroup label="인문대">
                <option value="역사">사학과</option>
                <option value="국문">국문학과</option>
            </optgroup>
        </select> 
        
        <input type="text" list="mobile05">
        <datalist id="mobile05">
            <option value="ios"></option>
            <option value="android"></option>
            <option value="windows"></option>
        </datalist>

        <input type="text" list="mobile">
        <datalist id="mobile">
            <option value="ios" label="애플"></option>
            <option value="android" label="구글"></option>
            <option value="windows" label="MS"></option>
        </datalist>

        <textarea name="intro" cols="60" rows="5"></textarea>
    </form>
</body>
</html>

 

[ex08]

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>etc</title><!-- 쇼핑몰 관리자만들기  -->
</head><!-- java에서는 자바 컴파일러(compiler)가 에러를 잡아주지만 html, javascript 에서는 브라우저에서 interpreter(interpreting) console(F12)창으로 오류를 확인할 수 있다. -->
<body>
    <button type="submit">전송</button><!-- = -->
    <input type="submit" value="전송"/>
    <button type="reset">초기화</button><!-- = -->
    <input type="reset" value="초기화"/>    
    <button type="button">버튼</button>
    <button type="submit"><img src="img/tick.png"/></button>
    <input type="image" src="img/tick.png"/><br><br>
    
    <form oninput="result.value=parseInt(num1.value)+parseInt(num2.value)">
        <input type="number" id="num1"/> +
        <input type="number" id="num2"/> =
        <output id="result"></output><!-- NaN(Non a Number): 숫자가 아니다 -->
    </form>
    
    <progress value="30" max="100"></progress>
    <progress value="0.3"></progress>
    <meter value="10" max="100"></meter>
    <meter value="0.1"></meter>
    <meter value="11" min="2" max="20" low="8" high="16" optimum="10"></meter><!-- optimum 적정값. -->
</body>
</html>

728x90

'WEB > HTML' 카테고리의 다른 글

HTML 태그 먹히지 않게 하기.  (0) 2018.05.04
[HTML] SVG를 이용하여 색깔 그라데이션 넣기.  (0) 2017.08.28
[HTML] HTML강의 - ch04  (0) 2017.08.22
[HTML] HTML강의 - ch02  (0) 2017.08.22
[HTML] HTML강의 - ch01  (0) 2017.08.22

댓글

티스토리툴바