✔ 뷰어로 보기

HTML

2016.06.01 13:54

Form 요소 설명

KKMS

조회 수 12831 추천 수 0 댓글 4

단축키

Prev이전 문서

Next다음 문서

가 크게 작게 위로 아래로 댓글로 가기 인쇄

단축키

Prev이전 문서

Next다음 문서

가 크게 작게 위로 아래로 댓글로 가기 인쇄

Form 요소 설명

1. Text

<form>
  First name:<br>
  <input type="text" name="firstname"><br>
  Last name:<br>
  <input type="text" name="lastname">
</form>

2. Radio

<form>
  <input type="radio" name="gender" value="male" checked> Male<br>
  <input type="radio" name="gender" value="female"> Female<br>
  <input type="radio" name="gender" value="other"> Other
</form>

3. Submit

<form action="action_page.php">
  First name:<br>
  <input type="text" name="firstname" value="Mickey"><br>
  Last name:<br>
  <input type="text" name="lastname" value="Mouse"><br><br>
  <input type="submit" value="Submit">
</form>

4. Name Attribute

<form action="action_page.php">
  First name:<br>
  <input type="text" value="Mickey"><br>
  Last name:<br>
  <input type="text" name="lastname" value="Mouse"><br><br>
  <input type="submit" value="Submit">
</form>

5. Grouping Form Data

<form action="action_page.php">
  <fieldset>
    <legend>Personal information:</legend>
    First name:<br>
    <input type="text" name="firstname" value="Mickey"><br>
    Last name:<br>
    <input type="text" name="lastname" value="Mouse"><br><br>
    <input type="submit" value="Submit">
  </fieldset>
</form>

6. The <select> Element (Drop-Down List)

<select name="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat">Fiat</option>
  <option value="audi">Audi</option>
</select>

<option value="fiat" selected>Fiat</option>

7. The <textarea> Element

<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>

8. The <button> Element

<button type="button" onclick="alert('Hello World!')">Click Me!</button>

9. HTML5 <datalist> Element

<form action="action_page.php">
  <input list="browsers">
  <datalist id="browsers">
    <option value="Internet Explorer">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
  </datalist> 
</form>

10. HTML5 <keygen> Element

<form action="action_page.php">
  Username: <input type="text" name="user">
  Encryption: <keygen name="security">
  <input type="submit">
</form>

11. HTML5 <output> Element

<form action="action_page.asp"
  oninput="x.value=parseInt(a.value)+parseInt(b.value)">
  0
  <input type="range"  id="a" name="a" value="50">
  100 +
  <input type="number" id="b" name="b" value="50">
  =
  <output name="x" for="a b"></output>
  <br><br>
  <input type="submit">
</form>

12. Input Type: password

<form>
  User name:<br>
  <input type="text" name="username"><br>
  User password:<br>
  <input type="password" name="psw">
</form>

13. Input Type: checkbox

<form>
  <input type="checkbox" name="vehicle1" value="Bike"> I have a bike<br>
  <input type="checkbox" name="vehicle2" value="Car"> I have a car 
</form>

14. Input Type: number

<form>
  Quantity (between 1 and 5):
  <input type="number" name="quantity" min="1" max="5">
</form>

15. Input Type: date

<form>
  Birthday:
  <input type="date" name="bday">
</form>

<form>
  Enter a date before 1980-01-01:
  <input type="date" name="bday" max="1979-12-31"><br>
  Enter a date after 2000-01-01:
  <input type="date" name="bday" min="2000-01-02"><br>
</form>

16. Input Type: color

<form>
  Select your favorite color:
  <input type="color" name="favcolor">
</form>

17. Input Type: range

<form>
  <input type="range" name="points" min="0" max="10">
</form>

18. Input Type: month

<form>
  Birthday (month and year):
  <input type="month" name="bdaymonth">
</form>

19. Input Type: week

<form>
  Select a week:
  <input type="week" name="week_year">
</form>

20. Input Type: time

<form>
  Select a time:
  <input type="time" name="usr_time">
</form>

21. Input Type: datetime

<form>
  Birthday (date and time):
  <input type="datetime" name="bdaytime">
</form>

22. Input Type: datetime-local

<form>
  Birthday (date and time):
  <input type="datetime-local" name="bdaytime">
</form>

23. Input Type: email

<form>
  E-mail:
  <input type="email" name="email">
</form>

24. Input Type: search

<form>
  Search Google:
  <input type="search" name="googlesearch">
</form>

25. Input Type: tel

<form>
  Telephone:
  <input type="tel" name="usrtel">
</form>

26. Input Type: url

<form>
  Add your homepage:
  <input type="url" name="homepage">
</form>

27. The value Attribute

<form action="">
First name:<br>
<input type="text" name="firstname" value="John">
<br>
Last name:<br>
<input type="text" name="lastname">
</form>

28. The readonly Attribute

<form action="">
First name:<br>
<input type="text" name="firstname" value="John" readonly>
<br>
Last name:<br>
<input type="text" name="lastname">
</form>

29. The disabled Attribute

<form action="">
First name:<br>
<input type="text" name="firstname" value="John" disabled>
<br>
Last name:<br>
<input type="text" name="lastname">
</form>

30. The size Attribute

<form action="">
First name:<br>
<input type="text" name="firstname" value="John" size="40">
<br>
Last name:<br>
<input type="text" name="lastname">
</form>

31. The maxlength Attribute

<form action="">
First name:<br>
<input type="text" name="firstname" maxlength="10">
<br>
Last name:<br>
<input type="text" name="lastname">
</form>

32. The autocomplete Attribute

<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>

33. The autofocus Attribute

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

34. The height and width Attributes

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

35. The list Attribute

<input list="browsers">

<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

36. The min and max Attributes

Enter a date before 1980-01-01:
<input type="date" name="bday" max="1979-12-31">

Enter a date after 2000-01-01:
<input type="date" name="bday" min="2000-01-02">

Quantity (between 1 and 5):
<input type="number" name="quantity" min="1" max="5">

37. The placeholder Attribute

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

38. The required Attribute

Username: <input type="text" name="usrname" required>

39. The step Attribute

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

Prev Sass 소개 Sass 소개 2019.09.19by DIV 제거와 CSS 코드 줄이기 Next

DIV 제거와 CSS 코드 줄이기 2016.02.17by

위로 아래로 댓글로 가기 인쇄

✔댓글 쓰기

에디터 선택하기

✔ 텍스트 모드 ✔ 에디터 모드

댓글 쓰기

에디터 사용하기 닫기

Comments '4'

?
KKMS 2016.06.02 15:40

<style>
.group input { display:none; }
.button:hover { cursor:pointer }
.button {
display:inline-block; font-size: 20px;
padding:5px; text-align:center;
width: 50px; height: 40px;
line-height:35px; font-weight:700;
border-radius:3px; background:#eee;
color:#777; border:1px solid #ccc;
}
.group input:nth-of-type(1):checked ~ label:nth-of-type(1) { background:tomato; color:#fff;
}
.group input:nth-of-type(2):checked ~ label:nth-of-type(2) {
background:gold; color:#f00;
}
</style>
<div class="group">
<input id="rad1" type="radio" name="gender" checked="checked" />
<input id="rad2" type="radio" name="gender" />
<label for="rad1" class="button">남자</label>
<label for="rad2" class="button">여자</label>
</div>

댓글
?
CDR 2016.06.17 15:22

<style>
* {
   margin: 0px;
   padding: 0px;
}
.jumsoo {
   width: 100px;
   height: 100px;
   border: 1px solid blue;
   border-radius: 50px;
   font-size: 40px;
   text-align: center;
   line-height: 100px;
   background-color: gold;
   color: red;
}
.inBox {
   background-color: gold;
}
.result {
   width: 100px;
   height: 30px;
   border: 0px solid blue;
   border-radius: 5px;
   background-color: blue;
   color: white;
   text-align: center;
   line-height: 30px;
   cursor: pointer
}
</style>
<p id="printX" class="jumsoo">안녕</p>
<input type="range" value="" class="inBox" id="inputSize" min="1" max="30">
<input type="color" value="" class="inBox" id="inputNumber">
<p class="result" onclick="printResult()">표시</p>
<script>
function printResult() {
   var sizeX = document.getElementById("inputSize").value;
   document.getElementById("printX").style.fontSize = sizeX+"px";
   var strX = document.getElementById("inputNumber").value;
   document.getElementById("printX").style.color = strX;
}
</script>

수정 삭제 댓글
?
KKMS 2020.06.25 14:34

<style>

* { margin: 0px; padding: 0px; color: rgba(20,20,20, 0.7); }

.imgArea { display: block; width: 226px; height: 150px; background-image: url("http://fact119.com/zard/images1.jpg"); background-position: 50% 50%; background-size: cover; background-repeat: no-repeat; }

</style>

<input id="sC1" type="radio" name="selCity" value="ansan" checked> 안산

<input id="sC2" type="radio" name="selCity" value="seoul"> 서울

<input id="sC3" type="radio" name="selCity" value="busan"> 부산

<button id="selC">도시선택</button>

<div id="imgArea" class="imgArea"></div>

<script>

let selC = document.getElementById("selC");

let sc1 = document.getElementById("sc1");

let sc2 = document.getElementById("sc2");

let sc3 = document.getElementById("sc3");

let imgArea = document.getElementById("imgArea");

let selV = 0;

sC1.onclick = function() { selV = 0; }

sC2.onclick = function() { selV = 1; }

sC3.onclick = function() { selV = 2; }

selC.onclick = function() {

let imgMap = [

'url("http://fact119.com/zard/images1.jpg")',

'url("http://fact119.com/zard/images2.jpg")',

'url("http://fact119.com/zard/images3.jpg")'

];

imgArea.style.backgroundImage = imgMap[selV];

}

</script>

댓글
?
KKMS 2020.06.25 16:30

<style>
* { margin: 0px; padding: 0px; }
.myPara { width: 100px; height: 105px; overflow: hidden; border: 5px solid red; }
</style>
<div id="myPara" class="myPara">ZARD는 1991년에 첫 번째 싱글 《Good-bye My Loneliness》로 데뷔하였다. 5번째 싱글 《In my arms tonight》 발표 직후, 베이스를 담당하는 호시 히로야스(星弘泰)가 탈퇴하고 곧바로 다음 6번째 싱글 《負けないで》 직후, 기타를 맡던 마치다 후미토(町田文人)와 베이스 담당 미치쿠라 코스케(道倉康介), 키보드 담당 이케자와 기미타카(池澤公隆)가 탈퇴를 선언한 것으로 추측된다. </div>
<button id="clkBtn">더보기</button>
<script>
let clkBtn=document.getElementById("clkBtn");
let sI=0;
clkBtn.onclick = function() {
var myPara = document.getElementById("myPara");
if(sI%2==0) {
myPara.style.width = "95%";
clkBtn.innerHTML = "줄이기"; }
else {
myPara.style.width = "100px";
clkBtn.innerHTML = "더보기";
}
sI++;
}
</script>

댓글

Category

List of Articles
번호	분류	제목	날짜	조회 수
41	HTML	4. DIV안에 DIV 넣어 정렬하기 5	2015.12.23	134703
40	HTML	5. DIV를 통한 헤더 만들기 1	2015.12.24	83946
39	HTML	6. DIV를 통한 전체 화면 사용하기 & 응용 2	2015.12.24	53803
38	HTML	3. DIV내의 문자컨텐츠 수평정렬과 수직정렬 1	2015.12.23	24261
37	HTML	8. PHP를 통한 index파일의 구성 1	2015.12.28	19804
36	HTML	10. position: absolute; 에 대해 알아보자 1	2015.12.30	19672
35	HTML	JavaScript의 반복문을 알아보자. 2	2016.02.24	16534
34	HTML	2. DIV요소의 수평정렬과 수직정렬	2015.12.23	15482
33	HTML	Transition에 대해 알아보자. 8	2016.06.22	13707
32	SASS	Sass 소개	2019.09.19	13118
»	HTML	Form 요소 설명 4	2016.06.01	12831
30	HTML	DIV 제거와 CSS 코드 줄이기	2016.02.17	10580
29	HTML	li 에 대해 알아보자. 2	2016.02.15	10342
28	HTML	요소의 수직정렬을 알아보자. 1	2016.03.01	10340
27	HTML	1. Inline 요소와 Block 요소에 대한 이해	2015.12.22	10127
26	HTML	11. viewport를 활용한 반응형 예제	2015.12.31	9208
25	HTML	9. position: relative; 에 대해 알아보자	2015.12.29	8553
24	HTML	7. position: static; 에 대해 알아보자.	2015.12.28	7257
23	HTML	class 에 대해 알아보자. 1	2016.02.16	6740
22	HTML	하나의 class = 하나의 디자인 ?????	2016.02.23	6204

쓰기

KKMS' Blog

Form 요소 설명

단축키

단축키

IMLAC [1970] PDS-1

TOSHIBA [1980] T-200

TERTA [1980] Tap34

금성 [1982] FC-100

Vector Graphics [1976] Vector 1