HTML5文本框是一种用于在网页上输入和显示文本的表单元素，它通常用于收集用户输入的信息，如用户名、密码、电子邮件地址等，HTML5文本框具有许多属性和事件，可以使其更加灵活和易于使用。
1、基本语法
HTML5文本框的基本语法如下：
<input type="text" name="textfield" value="默认文本">
type属性用于指定输入类型，name属性用于指定输入字段的名称，value属性用于指定输入字段的默认值。
2、属性
HTML5文本框有许多属性，以下是一些常用的属性：
- placeholder：指定输入字段为空时显示的提示信息。
- required：指定输入字段必须填写才能提交表单。
- autofocus：指定输入字段在页面加载时自动获得焦点。
- readonly：指定输入字段为只读状态，用户无法修改其内容。
- disabled：指定输入字段为禁用状态，用户无法与其交互。
- maxlength：指定输入字段允许的最大字符数。
- pattern：指定输入字段的值必须符合正则表达式的格式要求。
- size：指定输入字段的宽度（以字符为单位）。
- list：指定一个数据列表，用户可以从中选择一个选项。
- autocomplete：指定是否启用输入字段的自动完成功能。
3、事件
HTML5文本框支持许多事件，以下是一些常用的事件：
- onfocus：当输入字段获得焦点时触发。
- onblur：当输入字段失去焦点时触发。
- onchange：当输入字段的值发生变化时触发。
- oninput：当用户对输入字段进行任何类型的输入操作时触发。
- onsubmit：当提交表单时触发。
- onreset：当重置表单时触发。
4、示例代码
以下是一些HTML5文本框的示例代码：
<!-- 带有提示信息的文本框 -->
<input type="text" name="username" placeholder="请输入用户名">
<!-- 必填的文本框 -->
<input type="text" name="email" required>
<!-- 自动聚焦的文本框 -->
<input type="text" name="password" autofocus>
<!-- 只读文本框 -->
<input type="text" name="code" readonly value="123456">
<!-- 禁用的文本框 -->
<input type="text" name="address" disabled>
<!-- 最大长度为10的文本框 -->
<input type="text" name="phone" maxlength="10">
<!-- 匹配邮箱格式的文本框 -->
<input type="text" name="email" pattern="[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,}$">
<!-- 宽度为200px的文本框 -->
<input type="text" name="message" size="200">
<!-- 带数据列表的文本框 -->
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
<option value="Safari">
<option value="Opera">
</datalist>
5、CSS样式
可以使用CSS样式来美化HTML5文本框，例如设置边框、背景颜色、字体大小等，以下是一些常用的CSS样式：
/* 设置边框 */
input[type="text"] {
border: 1px solid #ccc;
}
/* 设置背景颜色 */
input[type="text"] {
background-color: #f8f8f8;
}
/* 设置字体大小 */
input[type="text"] {
font-size: 14px;
}
HTML5文本框是一种非常实用的表单元素，可以用于收集用户输入的各种信息，通过使用不同的属性和事件，可以使文本框更加灵活和易于使用，还可以使用CSS样式来美化文本框，提高用户体验。