在HTML5中，绘制文本框主要依赖于HTML的<input>标签和CSS样式，HTML5提供了多种类型的输入框，如文本框、密码框、单选按钮、复选框等，在本回答中，我们将重点介绍如何使用HTML5绘制一个基本的文本框。
（图片来源网络，侵删）
1、创建HTML文件
我们需要创建一个HTML文件，在文件中，我们需要添加一个<form>元素，用于包含所有的输入控件，在<form>元素内部，我们可以添加一个或多个<input>元素，用于创建文本框。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF8">
<meta name="viewport" content="width=devicewidth, initialscale=1.0">
<title>HTML5文本框示例</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<form>
<label for="textbox">请输入文本：</label>
<input type="text" id="textbox" name="textbox">
</form>
</body>
</html>
2、添加CSS样式
接下来，我们需要为文本框添加一些基本的CSS样式，在这个例子中，我们将设置文本框的宽度、高度、边框样式等属性，为了方便起见，我们将这些样式保存在一个名为styles.css的外部CSS文件中。
/* styles.css */
body {
fontfamily: Arial, sansserif;
}
form {
display: flex;
flexdirection: column;
alignitems: center;
}
label {
marginbottom: 10px;
}
input[type="text"] {
width: 300px;
height: 30px;
padding: 5px;
border: 1px solid #ccc;
borderradius: 3px;
}
将上述CSS代码保存到styles.css文件中，并在HTML文件的<head>部分引入该文件，这样，我们就为文本框添加了一些基本的样式。
3、使用JavaScript处理文本框事件
除了基本的样式设置外，我们还可以为文本框添加一些交互功能，例如实时显示用户输入的内容、验证用户输入等，这些功能可以通过JavaScript实现，以下是一个简单的示例，当用户在文本框中输入内容时，会实时显示在页面上。
<script>
function displayText() {
var textbox = document.getElementById("textbox");
var display = document.getElementById("display");
display.innerHTML = textbox.value;
}
</script>
将上述JavaScript代码添加到HTML文件的<body>部分，我们需要在HTML文件中添加一个<div>元素，用于显示用户输入的内容，修改后的HTML代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF8">
<meta name="viewport" content="width=devicewidth, initialscale=1.0">
<title>HTML5文本框示例</title>
<link rel="stylesheet" href="styles.css">
</head>
<body onload="displayText()">
<form>
<label for="textbox">请输入文本：</label>
<input type="text" id="textbox" name="textbox" oninput="displayText()">
</form>
<div id="display"></div>
<script src="scripts.js"></script>
</body>
</html>
将上述JavaScript代码保存到一个名为scripts.js的外部文件中，并在HTML文件的<body>部分引入该文件，现在，当用户在文本框中输入内容时，页面上会实时显示用户输入的内容。
本文来自投稿，不代表重蔚自留地立场，如若转载，请注明出处https://www.cwhello.com/440496.html
如有侵犯您的合法权益请发邮件951076433@qq.com联系删除
