본문 바로가기

Python_WEB/HTML

HTML5 - 190602 Basic Study 5

반응형

1. 명시적 기법 / 묵시적 기법

<form>
<!--fieldset 기본값은 100%-->
<fieldset style="width:500px">
<legend>필수 입력 사항</legend>
<!--명시적 기법(권장)-->
<label for="name"> 이름 : </label> <input type="text" id="name" size="10" value="홍길동"><br>
<label for="id"> 아이디 : </label> <input type="text" id="id" size="10" placeholder="영문숫자로만입력해주세요" required><br>
<!--묵시적 기법-->
<label>
비밀번호 : <input type="password" size="10" required>
</label>
</fieldset>
</form>


2. 입력 양식 태그 1

<form>
<fieldset style="width:500px">
<legend>선택 입력 사항</legend>
당신의 성별은?
<label>남성 <input type="radio" name="sex" checked></label>
<label>여성 <input type="radio" name="sex"><br></label>

취미가 무엇입니까?
<label>축구<input type="checkbox" checked></label>
<label>바둑<input type="checkbox"></label>
<label>인터넷<input type="checkbox"></label>
<label>게임<input type="checkbox"></label><br>

E-Maill <input type="text">@
<select>
<option>daum.net</option>
<option selected>naver.com</option>
<option>google.com</option>
</select>

</fieldset>
</form>


3. 파일 입력 양식 태그

<form>
이력서 제출 <input type="file"><br>
</form>


4. select 선택 양식 태그

<form>
당신의 신발사이즈는?<br>
<select multiple size="8" style="overflow:hidden">
<optgroup label="남성용">
<option>250mm</option>
<option selected>265mm</option>
<option>270mm</option>
<option>275mm</option>
</optgroup>
<optgroup label="여성용">
<option>220mm</option>
<option>225mm</option>
<option>230mm</option>
<option>235mm</option>
</optgroup>
</select><br>
</form>

select 태그 속성>

1) select : 선택 양식 생성

2) optgroup : 그룹화

3) option : 옵션 생성


5. textarea 입력 태그

<form>
자기소개 및 남기고 싶은 말<br>
<textarea cols="30" rows="10" style="resize:none">하고싶은말</textarea><br>

<input type="submit" value="회원가입">
<input type="reset" value="취소">
</form>

두 줄 이상의 글자를 입력할 때 사용


6. HTML 5 신규 입력 양식 태그

<form>
색상 선택하기 <input type="color"><br>
날짜 <input type="date"><br>
날짜 <input type="datetime"><br>
이메일 <input type="email"><br>
월 <input type="month"><br>
숫자 <input type="number"><br>
범위선택 <input type="range"><br>
전화번호 <input type="tel"><br>
주소 <input type="url"><br>
주선택 <input tyep="week"><br>
</form>


7. submit 입력 태그


<form action="http://www.daum.net">

만든이 <input type="text" readonly value="안기웅"><br>
이름 <input type="text" required><br>
아이디 <input type="text" autofocus><br>
비밀번호 <input type="password" minlength="4" maxlength="12" title="다시입력해주세요"><br>

<input type="submit">

</form>


8. patten 입력 태그

<form>

<fieldset>

<legend>pattern 속성</legend>
<p><label for="tel">휴대폰 번호 : </label>
<input type="tel" id="email" pattern="\d{3}-\d{3,4}-\d{4}"
title="휴대폰 번호는 3자리 숫자-3자리에서 4자리 숫자-4자리 숫자로 입력하셔야 합니다." /></p>
<p><input type="submit" value="전송" /></p>

당신의 연령대는? <input type="number" value="10" min="10" max="100" step="10">

주로 사용하는 웹 브라우저는? <input type="text" list="browser">
<datalist id="browser">
<option value="익스플로러"></option>
<option value="구글크롬"></option>
<option value="파이어폭스"></option>
</datalist>

</fieldset>

</form>


7, type 속성

1) button : 버튼

2) checkbox : 체크박스

3) file : 파일 입력 양식

4) hidden : 숨기기

5) image : 이미지 형태

6) password : 비밀번호 입력 양식(* 로 표기)

7) radio : 라디오 버튼

8) reset : 초기화 버튼

9) submit : 제출 버튼

10) text : 글자 입력 양식

반응형

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

HTML5 - 190602 Basic Study 7  (0) 2019.06.02
HTML5 - 190602 Basic Study 6(Membership page)  (0) 2019.06.02
HTML5 - 190602 Basic Study 5  (0) 2019.06.02
HTML5 - 190602 Basic Study 4  (0) 2019.06.02
HTML5 - 190601 Basic Study 3(Note)  (0) 2019.06.01
HTML5 - 190601 Basic Study 2  (0) 2019.06.01