728x90
반응형
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamic Input Components</title>
</head>
<body>
<!-- 여러 개의 영역을 미리 준비 -->
<div id="section1"></div>
<div id="section2"></div>
<div id="section3"></div>
<script>
const inputComponents = [
{ id: 1, type: 'text', placeholder: 'Enter your name', container: 'section1' },
{ id: 2, type: 'number', placeholder: 'Enter your age', container: 'section2' },
{ id: 3, type: 'email', placeholder: 'Enter your email', container: 'section1' },
{ id: 4, type: 'password', placeholder: 'Enter your password', container: 'section3' },
{ id: 5, type: 'tel', placeholder: 'Enter your phone number', container: 'section2' },
{ id: 6, type: 'date', placeholder: 'Select a date', container: 'section1' },
{ id: 7, type: 'datetime-local', placeholder: 'Select date and time', container: 'section3' },
{ id: 8, type: 'checkbox', label: 'Agree to terms', container: 'section2' },
{ id: 9, type: 'radio', name: 'gender', values: ['male', 'female', 'other'], label: 'Gender', container: 'section1' },
{ id: 10, type: 'file', placeholder: 'Upload a file', container: 'section3' },
];
inputComponents.forEach(component => {
// 지정된 container 요소를 가져옵니다.
const container = document.getElementById(component.container);
let element;
if (component.type === 'checkbox' || component.type === 'radio') {
element = document.createElement('fieldset');
const legend = document.createElement('legend');
legend.textContent = component.label;
element.appendChild(legend);
// 라디오 버튼 또는 체크박스를 처리합니다.
component.values.forEach((value, index) => {
const input = document.createElement('input');
input.type = component.type;
input.id = `input-${component.id}-${index}`;
input.name = component.name;
input.value = value;
const label = document.createElement('label');
label.setAttribute('for', input.id);
label.textContent = value;
element.appendChild(input);
element.appendChild(label);
element.appendChild(document.createElement('br')); // 라디오 버튼 사이에 줄 바꿈
});
} else {
element = document.createElement('input');
element.type = component.type;
element.id = `input-${component.id}`;
element.placeholder = component.placeholder || '';
}
// 해당 container에 컴포넌트를 추가합니다.
container.appendChild(element);
container.appendChild(document.createElement('br')); // 줄 바꿈을 추가하여 각 컴포넌트 간에 여백을 둡니다.
});
</script>
</body>
</html>반응형
'개발 > Javascript' 카테고리의 다른 글
| import 자동생성 (0) | 2024.12.01 |
|---|---|
| input component development (0) | 2024.11.30 |
| input과 form 연결 (0) | 2024.11.30 |
| Form Data. (0) | 2024.11.30 |
| [javascript] ajax 폼 전송 (0) | 2022.11.06 |