HTML 06 입력 양식 - Input 요소의 속성

김민호·2021년 8월 16일
0

HTML & CSS

목록 보기
6/17
post-thumbnail

value 속성

  • input 요소의 입력 필드(input field)에 나타나는 초깃값을 설정
<h1>value 속성을 이용한 초기값 설정</h1>
	<form action="/examples/media/request.php">
		이름 : <br>
		<input type="text" name="student_name"><br>
		학번 : <br>
		<input type="text" name="student_id"><br>
		학과 : <br>
		<input type="text" name="department" value="컴퓨터공학과"><br><br>
		<input type="submit" value="전송">
	</form>

readonly 속성

  • 사용자가 입력 필드를 볼 수는 있으나, 수정할 수는 없도록 설정
  • disabled 속성과 다른 점은 전송 버튼(submit)을 누르면 초깃값이 서버로 전송된다는 점
<h1>readonly 속성을 이용한 필드값 수정 제한</h1>
	<form action="/examples/media/request.php">
		이름 : <br>
		<input type="text" name="student_name"><br>
		학번 : <br>
		<input type="text" name="student_id"><br>
		학과 : <br>
		<input type="text" name="department" value="컴퓨터공학과" readonly><br><br>
		<input type="submit" value="전송">
	</form>

disabled 속성

  • 사용자가 입력 필드를 아예 사용할 수 없도록 설정. NO 사용 NO 클릭
  • readonly 속성과는 달리 submit 을 눌러도 초깃값이 서버로 전송되지 않음
	<h1>disabled 속성을 이용한 필드 사용 제한</h1>
	<form action="/examples/media/request.php">
		이름 : <br>
		<input type="text" name="student_name"><br>
		학번 : <br>
		<input type="text" name="student_id"><br>
		학과 : <br>
		<input type="text" name="department" value="컴퓨터공학과" disabled><br><br>
		<input type="submit" value="전송">
	</form>

maxlength 속성

  • 입력 필드에 입력할 수 있는 문자의 최대 길이(length)를 설정
<h1>maxlength 속성을 이용한 필드의 최대 길이 설정</h1>
	<form action="/examples/media/request.php">
		이름 : (이름은 10자까지만 가능해요!)<br>
		<input type="text" name="student_name" value="홍길동" maxlength="10"><br>
		학번 : <br>
		<input type="text" name="student_id"><br><br>
		<input

size 속성

  • 입력 필드에 보여지는 input 요소의 크기(size)를 설정
  • maxlength 속성과는 달리 입력 필드가 한 번에 보여줄 수 있는 문자의 최대 개수만을 의미
  • 입력될 수 있는 문자의 최대 길이는 maxlength 속성값에 따라 달라지며, size 속성과는 전혀 무관
<h1>size 속성을 이용한 필드의 크기 설정</h1>
	<form action="/examples/media/request.php">
		이름 : <br>
		<input type="text" name="student_name" value="홍길동" size="50"><br>
		학번 : <br>
		<input type="text" name="student_id"><br><br>
		<input type="submit" value="전송">
	</form>

HTML5에서 추가된 input 요소의 속성

  • autocomplete
  • autofocus
  • form
  • formaction
  • formenctype
  • formmethod
  • formnovalidate
  • formtarget
  • height and width
  • list
  • min and max
  • multiple
  • pattern (정규식)
  • placeholder
  • required
  • step
profile
개발자로서의 삶은 https://velog.io/@maxminos 에서 기록하고 있습니다 😀

0개의 댓글