input 태그의속성을따로지정하지않고써줬을경우에는텍스트입력창으로나와요!
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
이름 : <input>
</body>
</html>
input 태그의기본형식
<input type="text" value="초기값" name="이름">
각속성이나타내는역할
1. type : input 태그의 종류
2. value : input 태그의 초기값
3. name : 제출시 서버로 전달되는 이름
<html>
text : <input type="text">
</html>
<html>
text : <input type="text" value="입력해주세요.">
</html>value속성을"입력해주세요."라고했어요.
이와같이value 속성은input태그의초기값을설정해줘요.
그리고name속성은폼제출시서버로전달되는이름이에요.
input입력창안의데이터는얼마든지변할수있으니그자체를부르는다른이름이필요하다는거죠!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
text : <input type="text"><br>
range : <input type="range"><br>
datetime-local : <input type="datetime-local"><br>
checkbox : <input type="checkbox"><br>
radio : <input type="radio"><br>
reset : <input type="reset"><br>
file : <input type="file"><br>
submit : <input type="submit"><br>
image : <input type="image" src="in1.png" style="width:100px;"><br>
</body>
</html>
type속성이text인input태그는말그대로텍스트를입력받아요.
type속성이range인input태그는슬라이드바를조절하여범위내의숫자를입력받아요.
- max : 최댓값
- min : 최솟값
- step : 숫자들 사이의 간격
기본범위는1부터100까지로설정되어있는데,위세부속성을이용하면다른범위로설정할수도있어요!
range : <input type="range" min="10" max="20" step="2">
조절바를움직여보세요!최솟값이10이고최댓값이20,간격이2인input태그를음미해보시기바랍니다.
type속성이datetime-local인input태그는날짜와시간을입력받아요.
자동으로입력기도생성되기때문에아주편리해요ㅎㅎ
심지어는사용자가이상한정보를입력하지않도록하는유효성검사도알아서해준답니다.
네번째는checkbox예요.checkbox는위와같이선택하거나/선택하지않거나둘중하나를입력받아요.
물론하나만으로도충분히의미가있지만checkbox를여러개배치해서중복선택을받는데에쓰기도해요.
<html>
checkbox1 : <input type="checkbox"><br>
checkbox2 : <input type="checkbox"><br>
checkbox3 : <input type="checkbox"><br>
</html>radio 는여러개중에하나만을선택하게하고싶을때사용해요!
그래서!두개이상의radio를name속성을이용해하나의그룹으로묶어서사용해요.
위코드를보면name속성이모두drink인것을알수있어요!그래서한그룹으로인식된거구요!
만약name속성을다르게설정한다면다른그룹으로인식하게돼요!
<html>
아이스아메리카노 : <input type="radio" name="drink" value="i_a"><br>
아이스라떼 : <input type="radio" name="drink" value="i_l"><br>
아이스티 : <input type="radio" name="drink" value="i_t"><br><br>
그냥 얼음 : <input type="radio" name="just" value="i_t"><br>
그냥 물 : <input type="radio" name="just" value="i_t"><br>
</html>
reset 은그자체로쓰이기보다form태그로묶어둔모든요소를초깃값으로되돌리는기능을해요.
박수지님이직접체크박스도눌러보고,텍스트박스에글도쓰고나서'초기화'버튼을눌러보세요!
짜잔!form태그로둘러싸인모든입력값이초깃값으로돌아간것을확인할수있어요.
reset은사용자의편의를위한type
file 은업로드할파일을선택하는선택기와파일선택버튼을나타내요!
submit은form태그로둘러싼요소들의입력값을어딘가로전송하는버튼을나타내요
지금은폼의데이터를주고받는방법을배우지않아서submit버튼을눌렀을때그냥흰창이뜨지만,
폼의데이터를주고받는방법을배우게되면자주쓰이게될type이에요!
image는제출버튼에'제출'글자대신이미지가씌어져있다고생각하면돼요!
image : <input type="image" src="이미지파일명.확장자"
type이image인input태그도그와같은방법으로만들어주면돼요!
