offfff

HTML Input Attribute 본문

프로그래밍

HTML Input Attribute

offfff 2016. 9. 21. 09:00

The value Attribute


value 속성은 입력칸의 초기값을 설정하는 정의한다.


<!DOCTYPE html>

<html>

<body>


<form action="">

First name:<br>

<input type="text" name="firstname" value="John">

</form>


</body>

</html>


실행결과는 아래와 같다.


First name:




The readonly Attribute


readonly는 입력칸의 내용을 바꿀 수 없도록(입력전용) 정의하는 속성이다.


<!DOCTYPE html>

<html>

<body>


<form action="">

First name:<br>

<input type="text" name="firstname" value="John" readonly>

</form>


</body>

</html>


value 속성 예제와 똑같은 input을 생성하지만 클릭과 수정이 불가능하다.

실행결과는 아래와 같다.


First name:




The disabled Attribute


disabled는 입력칸을 사용하지 못하게 막는 속성이다.

회색으로 변하면서 어떠한 입력도 불가능하다.

readonly와 비슷하지만, 차이점은 submit시에 내용을 보내지 않는다는 것이다.


<!DOCTYPE html>

<html>

<body>


<form action="">

First name:<br>

<input type="text" name="firstname" value="John" disabled>

</form>


</body>

</html>


실행결과는 아래와 같다.


First name:




The size Attribute


size은 입력 칸의 크기를 결정하는 속성이다. 그 단위는 문자열 글자 수를 기준으로 한다.


<!DOCTYPE html>

<html>

<body>


<form action="">

First name:<br>

<input type="text" name="firstname" value="John" size="40">

</form>


</body>

</html>


실행결과는 아래와 같다.


First name:




The maxlength Attribute


maxlength는 입력 칸의 최대 허용 문자열 길이를 지정하는 속성이다.

지정한 숫자 이상으로 문자열을 입력하는 것이 불가능해 진다.

그러나 문자 개수 초과시 이것을 알려주지는 않아서, 그러한 기능은 자바스크립트 코드를 추가해야 한다.


<!DOCTYPE html>

<html>

<body>


<form action="">

First name:<br>

<input type="text" name="firstname" value="John" maxlength="10">

</form>


</body>

</html>


실행결과는 아래와 같다.


First name:



HTML5 Attribute


HTML5에는 아래와 같은 <input>의 속성들이 추가되었다.


- autocomplete

- autofocus

- form

- formemctype

- formenctype

- formnovalidate

- formtarget

- height and width

- list

- min and max

- multiple

- pattern(regrexp)

- placeholder

- required

- step


그리고 아래는 <form>의 속성들이다


- autocomplete

- novalidate




The autocomplete Attribute


autocomplete는 form이나 input의 자동완성 기능을 사용할 것인지 지정하는 속성이다.

자동완성기능이 켜져있다면, 브라우저는 사용자가 이전에 입력한 값을 가지고 입력 값을 자동으로 완성한다.

form에 autocomplete를 사용하도록 설정하고, 그 안의 input들 중에서 일부를 사용하지 않도록 설정이 가능하다.

혹은 반대로, 전체를 사용하지 않도록 하더라도, 내부에서 몇몇 input은 사용하도록 설정하는 것도 가능하다.


<!DOCTYPE html>

<html>

<body>


<form action="action_page.php" autocomplete="on">

First name:<input type="text" name="fname"><br>

Last name:<input type="text" name="lname"><br>

E-mail:<input type="email" name="email" autocomplete="off"><br>

<input type="submit">

</form>


</body>

</html>




The novalidate Attribute


novalidate는 <form>의 속성이다.

이 속성으로 지정된 form은 submit 시에 유효성 검사를 하지 않는다.


<!DOCTYPE html>

<html>

<body>


<form action="action_page.php" novalidate>

E-mail:<input type="email" name="user_email" <br>

<input type="submit">

</form>


</body>

</html>




The autofocus Attribute


autofocus는 페이지를 로딩할때 해당 입력칸에 자동적으로 포커스를 설정하도록 지정하는 속성이다.

아래 예제에서는 Last name을 입력하는 칸에 자동적으로 커서가 활성화 되어있도록 설정했다.


<!DOCTYPE html>

<html>

<body>


<form action="action_page.php">

First name: <input type="text" name="fname"><br>

Last name: <input type="text" name="lname" autofocus><br>

</form>


</body>

</html>




The form Attribute


form 속성은 <input>이 속해있는 form을 id값을 통해 명시하는 속성이다.

<input>이 form 외부에 위치하더라도 해당 form의 내용으로 간주되는 것이다.


<!DOCTYPE html>

<html>

<body>


<form action="action_page.php" id="form1">

First name: <input type="text" name="fname"><br>

</form>


Last name: <input type="text" name="lname" form="form1">


</body>

</html>




The formaction Attribute


formaction은 form이 submit될 때, 입력을 조작하는 프로세스 파일(페이지)의 URL을 지정하는 속성이다.

formaction 속성은 form의 action 속성을 오버라이드 한다.

이 속성은 submit, image 타입과 함께 쓰인다.


<!DOCTYPE html>

<html>

<body>


<form action="action_page.php">

First name: <input type="text" name="fname"><br>

Last name: <input type="text" name="lname"><br>

<input type="submit"><br>

<input type="submit"><formaction="demo_admin.asp" value="submit as admin">

</form>


</body>

</html>




The formenctype Attribute


formenctype은 submit시에 데이터를 어떤 방식으로 인코딩하는지 명시하는 속성이다.

무조건 method="post" 속성의 form과 함께 쓰인다.

form의 enctype 속성을 오버라이드 하며, submit, image 타입과 함께 쓰인다.


<!DOCTYPE html>

<html>

<body>


<form action="demo_post_enctype.asp" method="post">

First name: <input type="text" name="fname"><br>

<input type="submit">

<input type="submit" formenctype"multipart/form-data" value="submit as multipart/form-data>

</form>


</body>

</html>




The formmethod Attribute


formmethod 속성은 action URL로 form 데이터를 보내는 HTTP method를 정의한다.

<form>의 method 속성을 오버라이드 하며, submit, image 타입과 함께 쓰인다.


<!DOCTYPE html>

<html>

<body>


<form action="action_page.asp" method="get">

First name: <input type="text" name="fname"><br>

Last name: <input type="text" name="lname"><br>

<input type="submit">

<input type="submit" formmethod="post" formaction="demo_post.asp" value="Submit using POST">

</form>


</body>

</html>




The formnovalidate Attribute


formnovalidate 속성은 <form>의 novalidate 속성을 오버라이드 한다.

이 속성은 submit 타입과 함께 쓰인다.


<!DOCTYPE html>

<html>

<body>


<form action="action_page.asp" method="get">

First name: <input type="text" name="fname"><br>

Last name: <input type="text" name="lname"><br>

<input type="submit">

<input type="submit" formnovalidate  value="Submit without validation">

</form>


</body>

</html>




The formtarget Attribute


formtarget 속성은 form이 submit 되고 나서 받은 응답을,

어디에 표시할지 이름이나 키워드로 명시하는 값으로 갖는다.

formtargetdms <form>의 target 속성을 오버라이드 하며, submit, image 타입과 쓰인다.


<!DOCTYPE html>

<html>

<body>


<form action="action_page.asp">

First name: <input type="text" name="fname"><br>

Last name: <input type="text" name="lname"><br>

<input type="submit">

<input type="submit" formtarget="_blank"  value="Submit to a new window">

</form>


</body>

</html>





The height and width Attribute


<input type="image">의 높이와 폭을 정의하는 속성이다.

이 속성을 사용하지 않으면, 브라우저가 이미지를 로딩할 때, 그림이 깜빡거리므로 꼭 사용한다.


<!DOCTYPE html>

<html>

<body>


<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">


</body>

</html>






The list Attribute


list는 <input>의 옵션을 미리 정의할 때 사용하는 <datalist>에 사용하는 속성이다.

아래와 같이 사용한다.


<!DOCTYPE html>

<html>

<body>


<input list="browsers">


<datalist id="browsers">

<option value="Internet Explorer">

<option value="Chrome">

<option value="Safari">

</datalist>


</body>

</html>




The min and max Attribute


이 속성들은 <input>의 최소, 최대 범위를 지정하는 속성이다.

이 속성은 number, range, date, datetime-local, month, time, week 타입들과 쓰인다.


<!DOCTYPE html>

<html>

<body>


<input type="date" name="bday" max="1979-12-31">

<input type="date" name=bday"" min="2000-01-02">

<input type="number" name="quantitiy" max="1" min="5">


</body>

</html>




The multiple Attribute


multiple은 하나 이상의 값을 입력하도록 허용하는 속성이다.

email, file 타입에 쓰인다.


<!DOCTYPE html>

<html>

<body>


Select images: <input type="file" name="img" multiple>


</body>

</html>





The pattern Attribute


pattern은 <input> 값을 체크하는 정규식을 적용할 때 사용된다.

이 속성은 text, search, url, tel, email, password 타입에 쓸 수 있다.

여기에서 더 자세히 알아볼 수 있다.


<!DOCTYPE html>

<html>

<body>


Country code: <input type="text" name="contry_code"

pattern="[A-Za-z]{3}" title="3 letter country code">


</body>

</html>






The placeholder Attribute


placeholder 속성은 입력 칸에 들어갈 예시를 정의하는 속성이다.

이 힌트는 유저가 입력칸에 값을 입력하기 전에 보여진다.

text, search, url, tel, email, password 타입에 사용된다.


<!DOCTYPE html>

<html>

<body>


<input type="text" name="fname" placeholder="Firstname">


</body>

</html>


실행 결과는 아래와 같다.





The required Attribute


required 속성은 submit 전에 무조건 작성해야 하는 입력 칸을 정의할 떄 사용한다.

text, search, url, tel, email, password, date pickers, number, checkbox, radio, file 타입에 사용된다.


<!DOCTYPE html>

<html>

<body>


<input type="text" name="name" required>


</body>

</html>




The step Attribute


step 속성은 <input>에서 입력하는 숫자의 단위를 정할 때 사용한다.

max, min 속성과 함께 많이 사용한다.

만약 step="3"으로 지정하면, 값은 ... -3, 0, 3, 6 ... 처럼 3 단위로 변화한다.


<!DOCTYPE html>

<html>

<body>


<input type="number" name="points" step="3">


</body>

</html>




아래 링크를 참조하여 번역 및 수정 함

http://www.w3schools.com/html/html_form_attributes.asp

저작자표시 비영리

'프로그래밍' 카테고리의 다른 글

라즈베리파이 원격 데스크톱 접속 환경구축  (0) 2016.10.01
라즈베리파이 시작하기  (0) 2016.09.30
HTML Input Types  (0) 2016.09.20
HTML Form Elements  (0) 2016.09.19
HTML Forms  (0) 2016.09.18
'프로그래밍' Related Articles more