欢迎光临
我们一直在努力

html表单里怎么设置默认值

HTML表单里怎么设置默认值

在HTML中,我们可以使用<input>标签为表单元素设置默认值,这样,当用户打开表单时,这些字段将自动填充为预设的值,本文将详细介绍如何在HTML表单中设置默认值,并提供一些相关问题与解答。

使用value属性设置默认值

1、1 示例代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>设置默认值示例</title>
</head>
<body>
<form>
  <label for="username">用户名:</label>
  <input type="text" id="username" name="username" value="张三">
  <br><br>
  <label for="email">邮箱:</label>
  <input type="email" id="email" name="email" value="zhangsan@example.com">
  <br><br>
  <label for="password">密码:</label>
  <input type="password" id="password" name="password" value="123456">
  <br><br>
  <input type="submit" value="提交">
</form>
</body>
</html>

1、2 解析

在上面的示例代码中,我们为<input>标签设置了value属性,当页面加载时,这些字段将自动填充为预设的值,用户名输入框的值为“张三”,邮箱输入框的值为“zhangsan@example.com”,密码输入框的值为“123456”。

使用defaultValue属性设置默认值(仅适用于日期、时间和数字类型的输入框)

2、1 示例代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>设置默认值示例(日期、时间和数字类型)</title>
</head>
<body>
<form>
  <label for="birthday">生日:</label>
  <input type="date" id="birthday" name="birthday" defaultValue="1990-01-01">
  <br><br>
  <label for="time">时间:</label>
  <input type="time" id="time" name="time" defaultValue="12:00:00">
  <br><br>
  <label for="age">年龄:</label>
  <input type="number" id="age" name="age" defaultValue="0">
  <br><br>
  <input type="submit" value="提交">
</form>
</body>
</html>

2、2 解析

在这个示例中,我们使用了defaultValue属性来设置日期、时间和数字类型的输入框的默认值,当页面加载时,这些字段将自动填充为预设的值,生日输入框的值为“1990-01-01”,时间输入框的值为“12:00:00”,年龄输入框的值为“0”,需要注意的是,defaultValue属性只适用于日期、时间和数字类型的输入框,对于其他类型的输入框,如文本、单选按钮等,应使用value属性来设置默认值。

未经允许不得转载:九八云安全 » html表单里怎么设置默认值