내용 많아서 따로 정리함.
1. input
기본 적으로 텍스트를 입력할 수 있는 입력창을 랜더링한다.
<input type="button" value="click me!" />특징으로는 닫는 태그 따로 없이 단일 element로 실행된다.
랜더링된 입력창에 텍스트를 입력할 수 있다.
1.1 input 의 속성 value
input의 속성 중 하나인 value를 이용하면, 페이지가 로드 될 때 기본적으로 입력창에 입력되는 텍스트를 지정할 수 있다.
<html>
<head>
<title>test</title>
</head>
<body>
<input type="text" value="기본입력" />
</body>
</html>
페이지가 로드 되면 기본적으로 value의 값이 입력되어 있다.
1.2 input의 속성 placeholder
입력창에 아무런 텍스트도 입력 되어지지 않았을 때 표기될 텍스트를 지정할 수 있다.
<html>
<head>
<title>test</title>
</head>
<body>
<input type="text" placeholder="id" />
</body>
</html>
value 와 역할이 비슷해 보이지만 엄염히 다르다.
placeholder는 주로 입력창에 입력되어야 할 내용에 대한 설명을 표기한다.
2. input의 type 종류
input의 기본 type은 text이다. 입력창에 텍스트를 입력할 수 있게 해준다.
이 외에도 input에는 다양한 종류의 type이 있다.
2.1 password
비밀번호를 입력할 수 있는 입력창이다.
입력된 값을 점자로 표기한다.
<html>
<head>
<title>test</title>
</head>
<body>
<input type="password" />
</body>
</html>
2.2 submit
수업 때 자세히 다루진 않았지만,
윪의 실전 압축 HTML/CSS 수업에서 들어서 정리해봄.
form element에 속한 내용들을 서버에 전송해주는 버튼을 만드는 기능이다.
<html>
<head>
<title>test</title>
</head>
<body>
<form>
<input type="text" placeholder="id입력" />
<input type="password" placeholder="pw 입력" />
<input type="submit"/>
</form>
</body>
</html>
기본적으로 제출이란 텍스트가 표기된다.
form영역안에 있는 내용을 보낼 서버가 지정되지 않아서,
버튼을 누르면 페이지가 새로 로드 될 뿐이다.
추가 내용은 수업 때 다루면 그 때가서 다시 정리하기로.
2.3 radio
여러개의 선택지 중 하나를 선택할 수 있는 체크박스를 만든다.
<html>
<head>
<title>test</title>
</head>
<body>
<input type="radio" /> 남자 <input type="radio" /> 여자
</body>
</html>
이런식으로 만들어지는데, 이 상태에서는 둘 다 선택이 가능하다.
2.3.1 name
둘 중 하나만 선택이 되도록 하려면
name 속성을 부여해 같은 그룹으로 만들어 줘야 한다.
<html>
<head>
<title>test</title>
</head>
<body>
<input type="radio" name="gender" /> 남자
<input type="radio" name="gender" /> 여자
</body>
</html>name 속성을 각각 부여해주고, 같은 값을 할당해주면, 한 그룹으로 묶여서
둘 중 하나만 선택할 수 있게 된다.
2.3.2 label
이렇게 radio가 만들어 졌을때,
남자 또는 여자 라는 텍스트를 클릭해도 해당 radio 에 체크가 되게끔 하고 싶으면
label element를 이용하면 된다.
<html>
<head>
<title>test</title>
</head>
<body>
<input type="radio" name="gender" />
<label>남자</label>
<input type="radio" name="gender" /> 여자
<label>여자</label>
</body>
</html>이렇게 작성하면 아직은 원하는대로 작동하지 않는다.
label 영역에 들어있는 텍스트가 어떤 radio를 위한 것인지 지정을 해줘야 한다.
이때,
input에는 id를 부여해주고,
label에는 for를 부여해준다.
<html>
<head>
<title>test</title>
</head>
<body>
<!-- id 부여 -->
<input type="radio" name="gender" id="male" />
<!-- for속성 부여 및 지정 할 input의 id(male)할당 -->
<label for="male">남자</label>
<!-- id 부여 -->
<input type="radio" name="gender" id="female" />
<!-- for속성 부여 및 지정 할 input의 id(female)할당 -->
<label for="female">여자</label>
</body>
</html>이렇게 해주면,
이 창에서 남자 또는 여자 라는 텍스트를 클릭해도,
해당하는 radio input에 체크가 된다.
작은 체크박스를 정조준 해서 클릭하기 쉽지 않은 사람 또는 일반적인 사용자의 편의를 위한 기능을 통해
웹 접근성을 높일 수 있다.
'경일 > HTML & CSS' 카테고리의 다른 글
| html, css 클론코딩 (0) | 2021.12.23 |
|---|---|
| block, inline, inline-block차이점/ 자식 element 사용/ html, css 클론코딩 (1) | 2021.12.22 |
| HTML 기초 / CSS기초 (0) | 2021.12.21 |
| HTML 주요 element 1편 (0) | 2021.12.20 |
| HTML 이란 (0) | 2021.12.20 |
댓글