input 태그의 주요 속성
- placeholder : 입력란에 힌트를 보여준다
- readonly : 읽기전용 문서를 만든다
- required : 필수 입력란을 만든다
- autofocus : 창을 열었을 때 바로 타이핑 할 수 있도록 해당 입력란이 선택된다
다음은 input 태그의 여러 속성을 담은 코드이다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>연습문제 2</title>
<style>
#container {
width:520px;
border:1px solid black;
padding:20px 40px;
margin:0 auto;
}
fieldset { margin-bottom:15px; }
legend { font-weight:bold; }
ul {list-style-type: none;}
li { line-height:30px;}
</style>
</head>
<body>
<div id="container">
<h1>프런트엔드 개발자 지원서 </h1>
<p>HTML, CSS, Javascript에 대한 기술적 이해와 경험이 있는 분을 찾습니다.</p>
<hr><b>개인정보</b>
<form>
<ul>
<li>
<lable for = 'r-name'>이름</lable>
<input type="test" placeholder="공백없이 입력하세요" autofocus required>
</li>
<li>
<lable for = 'r-num'>연락처</lable>
<input type="tel" required>
</li>
</ul>
<b>지원 분야</b>
<ul>
<li><input type = 'radio'> 웹 퍼블리싱</li>
<li><input type = 'radio'> 웹 애플리케이션 개발</li>
<li><input type = 'radio'> 개발 환경</li>
</ul>
<b>지원 동기</b>
<ul>
<textarea id = "motive" rows = "5" cols="60" placeholder="본사 지원 동기를 간략히 써 주세요"></textarea>
</ul>
<input type="submit" value="접수하기">
<input type="reset" value="다시쓰기">
</form>
</div>
</body>
</html>
미리보기
+ 추가. html 파일을 첨부하면 화면이 비정상적으로 꺠진다. 그래서 웹 미리보기는 삭제
폼에서 사용할 수 있는 여러 태그
- <textarea> ~ <textarea> : 여러 줄을 입력할 수 있는 텍스트 박스 생성
- select : 드롭다운 목록을 생성
- datalist : 데이터 목록을 생성
- option : <li>와 같이 <selext> 태그 안에 있으면 목록의 내용을 알려주고 datalist 태그 안에 있으면 데이터의 내용을 알려준다.
반응형
'Front end > HTML' 카테고리의 다른 글
| 입력 양식 작성하기 (1) (0) | 2022.08.16 |
|---|---|
| 웹 문서에 다양한 내용 입력하기 (0) | 2022.08.15 |
| HTML 기본 문서 만들기 (0) | 2022.08.14 |
| 웹 개발 시작하기 (0) | 2022.08.13 |
| Doit HTML + CSS + JavaScript 출처 (0) | 2022.08.11 |