입력 양식 작성하기 (2)

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