入力フォーム
40776 ワード
ツールバーの
1番(ボタン).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
document.addEventListener('DOMContentLoaded', () => {
const buttonA = document.querySelector('button')
const buttonB = document.querySelector('input[type=button]')
buttonA.addEventListener('click', (event) => {
event.currentTarget.textContent += '글자'
})
buttonB.addEventListener('click', (event) => {
event.currentTarget.value += '글자'
})
})
</script>
</head>
<body>
<!-- click 이벤트 -->
<button> 글자 </button>
<input type="button" value="글자">
<!-- submit 이벤트 -->
<form action="">
<input type="submit" value="글자">
</form>
</body>
</html>ワードボタンがあれば、ボタンを押すとボタン内に単語を入力できます.
2番(submit).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
document.addEventListener('DOMContentLoaded', () => {
const form = document.querySelector('form')
form.addEventListener('submit', () => {
const text = document.querySelector('input[type=text]')
if(text.value.indexOf('@') >= 0){
alert('정상적으로 제출')
} else {
alert('아메일 형식으로 입력해주세요.')
event.preventDefault()
}
})
})
</script>
</head>
<body>
<!-- submit 이벤트 -->
<form action="">
<input type="text" name = "test" id ="">
<input type="submit" value="글자">
</form>
</body>
</html>次の図に示すように、formラベルにbuttonラベルを作成するとsubnnのように動作します.
したがってtypeを入力するにはbuttonを使用しなければボタンの役割を果たすことができません.
<form>
//<button></button>
<input type = "button">
</form>選択ボックス
1番です.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
document.addEventListener('DOMContentLoaded', () => {
const select = document.querySelector('select')
const p = document.querySelector('p')
select.addEventListener('change', () => {
const options = event.currentTarget.options // select에 있는 모든 옵션 불러옴.
// const index = event.currentTarget.options.selectedIndex
const index = options.selectedIndex
p.textContent = `선택: ${options[index].textContent}`
console.log(options)
console.log(index)
})
})
</script>
</head>
<body>
<!-- submit 이벤트 -->
<select name="" id="">
<option value="">떡볶이</option>
<option value="">순대</option>
<option value="">오뎅</option>
<option value="">튀김</option>
</select>
<p>선택:떡볶이</p>
</body>
</html>
2日です.
複数をselectタグに追加して、複数の選択を行います.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
document.addEventListener('DOMContentLoaded', () => {
const select = document.querySelector('select')
const p = document.querySelector('p')
select.addEventListener('change', () => {
const options = event.currentTarget.options
const list = []
for (const option of options){
if (option.selected){
list.push(option.textContent)
}
}
p.textContent = `선택: ${options[index].textContent}`
})
})
</script>
</head>
<body>
<!-- submit 이벤트 -->
<select name="" id="" multiple>
<option value="">떡볶이</option>
<option value="">순대</option>
<option value="">오뎅</option>
<option value="">튀김</option>
</select>
<p>선택:떡볶이</p>
</body>
</html>
チェックボックスとラジオボタン
チェックボックス
ターゲットがtrueまたはfalseを表す場合に使用します.
ラジオボタン
複数のターゲットから1つを選択します.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
document.addEventListener('DOMContentLoaded', () => {
const checkbox = document.querySelector('input[type=checkbox]')
const checkboxlog = document.querySelector('h1#checkbox')
checkbox.addEventListener('change', () => {
if (checkbox.checked) {
checkboxlog.textContent = '체크'
} else {
checkboxlog.textContent = '해제'
}
})
const radios = document.querySelectorAll('input[type=radio][name=gender]')
const radioLog = document.querySelector('h1#radiobutton')
radios.forEach((radio) => {
radio.addEventListener('change', (event) => {
radioLog.textContent = event.currentTarget.value
})
})
})
//DOM6 참고
</script>
</head>
<body>
<input type="checkbox" name="" id=""><br>
<h1 id="checkbox"></h1>
<input type="radio" name="gender" id="" value="여성">여성<br>
<input type="radio" name="gender" id="" value="남성">남성<br>
<input type="radio" name="gender" id="" value="직접 지정">직접 지정<br>
<h1 id="radiobutton"></h1=>
</body>
</html>
例.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
document.addEventListener('DOMContentLoaded', () => {
let seconds = 0 //현재시간
let timerId = 0
// let [seconds, timerId] = [0,0] // 다중할당 연산
const checkbox = document.querySelector('input[type=checkbox]')
const timelog = document.querySelector('h1#checkbox')
checkbox.addEventListener('change', () => {
if (checkbox.checked) {
timerId = setInterval(() => {
seconds += 1
timelog.textContent = `${seconds}초`
}, 1000)
} else {
clearInterval(timerId)
}
})
})
</script>
</head>
<body>
<input type="checkbox"> 타이머활성화
<h1 id="checkbox">0초</h1>
</body>
</html>
追加します.
有効にすると背景が赤くなり、無効にすると背景が白くなります.
document.body.style.backgroundColorを使用します.
Reference
この問題について(入力フォーム), 我々は、より多くの情報をここで見つけました https://velog.io/@peterpppp/입력-양식テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol