创建表单,输入姓和名,姓名计算显示为姓-名 输入姓名,姓和名分别更新,
时间: 2024-06-08 21:10:21 浏览: 18
要创建一个表单,可以使用HTML的<form>标签,并在其中添加文本域来输入姓和名。可以使用<input>标签,并设置type属性为"text",name属性为"first_name"和"last_name"来创建文本域。
例如:
<form>
姓: <input type="text" name="first_name"><br>
名: <input type="text" name="last_name">
</form>
在上述表单中,用户可以在"姓"和"名"的文本域中输入相应的信息。
要实现姓名的计算并显示为"姓-名"的格式,可以使用JavaScript来处理表单的输入。可以添加一个事件监听器,当用户在文本域中输入内容时,触发一个函数来更新显示的姓名。
例如:
<script>
function updateFullName() {
var firstName = document.getElementsByName("first_name")[0].value;
var lastName = document.getElementsByName("last_name").value;
var fullName = firstName + "-" + lastName;
document.getElementById("full_name").textContent = fullName;
}
var firstNameField = document.getElementsByName("first_name");
var lastNameField = document.getElementsByName("last_name");
firstNameField.addEventListener("input", updateFullName);
lastNameField.addEventListener("input", updateFullName);
</script>
在上述代码中,updateFullName函数用于获取输入的姓和名,并将其拼接成"姓-名"的格式。然后,使用getElementById方法获取显示姓名的元素,并将计算后的全名赋值给该元素的textContent属性。
通过给"姓"和"名"的文本域添加input事件监听器,当用户输入内容时,会触发updateFullName函数并更新显示的姓名。
可以在HTML中加入一个元素来显示计算后的姓名:
例如:
<p>姓名: <span id="full_name"></span></p>
上述代码中,使用<span>标签和id属性为"full_name"来创建用于显示姓名的元素。
这样,当用户在"姓"和"名"的文本域中输入内容时,会实时更新显示的姓名为"姓-名"的格式。