设置html input默认值主要有以下方法：1. 对于text、number等类型，直接使用value属性；2. 对于checkbox和radio，使用checked属性控制默认选中状态；3. 使用JavaScript动态设置默认值时，可通过dom操作赋值，并结合domcontentloaded事件确保执行时机；4. placeholder用于提示文本，value用于实际提交的默认值；5. 处理date类型浏览器差异时，可用javascript格式化日期为yyyy-mm-dd并赋值；6. 提供“恢复默认值”按钮时，可先保存初始值并在点击时重新赋值。以上方法能应对不同场景下的input默认值设置需求。
设置HTML input元素的默认值，主要通过value属性实现。但这背后涉及到多种情况，比如不同类型的input元素、JavaScript动态设置、以及用户体验的考量。
解决方案：
对于大多数input类型，直接使用value属性即可：
立即学习“前端免费学习笔记（深入）”；
<input type="text" id="name" name="name" value="默认姓名"> <input type="number" id="age" name="age" value="18">
对于checkbox和radio，需要结合checked属性：
<input type="checkbox" id="agree" name="agree" value="yes" checked> 我同意 <input type="radio" id="male" name="gender" value="male" checked> 男 <input type="radio" id="female" name="gender" value="female"> 女
注意：checked属性无需赋值，只需存在即可。
如何使用JavaScript动态设置input默认值？
有时候，默认值需要根据某些条件动态设置。 这时候，JavaScript就派上用场了。
<input type="text" id="city" name="city"> <script> document.addEventListener('DOMContentLoaded', function() { let userCity = localStorage.getItem('userCity'); // 假设从本地存储获取 if (userCity) { document.getElementById('city').value = userCity; } else { document.getElementById('city').value = '北京'; // 默认值 } }); </script>
这段代码会在页面加载完成后，先尝试从localStorage获取用户城市信息，如果获取不到，就设置为“北京”。 使用DOMContentLoaded事件确保在DOM加载完成后执行JavaScript代码，避免找不到元素的问题。
placeholder和value有什么区别？什么时候使用哪个？
placeholder和value虽然都与input元素的显示有关，但用途截然不同。value是input元素的实际值，提交表单时会包含在数据中。而placeholder只是一个提示文本，当input元素为空时显示，用户输入内容后消失。
- 使用value的情况： 需要预先填充input元素的值，例如用户上次输入的信息、默认选项等。
- 使用placeholder的情况： 仅需要提示用户应该输入什么内容，不作为实际值提交。
例如：
<input type="text" id="email" name="email" placeholder="请输入您的邮箱"> <input type="text" id="username" name="username" value="上次登录用户名">
邮箱使用placeholder提示用户输入格式，而用户名使用value显示上次登录的用户名。
如何处理不同浏览器对input type=”date”默认值显示格式的差异？
input type=”date”在不同浏览器上的默认值显示格式可能存在差异。 例如，chrome可能显示YYYY-MM-DD，而firefox可能显示MM/DD/YYYY。 为了保证一致性，可以使用JavaScript进行格式化。
<input type="date" id="birthday" name="birthday"> <script> document.addEventListener('DOMContentLoaded', function() { let today = new Date(); let year = today.getFullYear(); let month = String(today.getMonth() + 1).padStart(2, '0'); // 月份从0开始，需要+1 let day = String(today.getDate()).padStart(2, '0'); let formattedDate = `${year}-${month}-${day}`; document.getElementById('birthday').value = formattedDate; }); </script>
这段代码获取当前日期，并将其格式化为YYYY-MM-DD，然后设置为input type=”date”的默认值。 padStart(2, ‘0’)用于确保月份和日期始终是两位数，不足两位数时在前面补0。
如何避免用户修改了默认值后，又想恢复到默认值的情况？
提供一个“恢复默认值”的按钮，让用户可以方便地恢复到初始状态。
<input type="text" id="address" name="address" value="北京市"> <button id="resetAddress">恢复默认地址</button> <script> document.addEventListener('DOMContentLoaded', function() { let defaultAddress = document.getElementById('address').value; // 保存默认值 document.getElementById('resetAddress').addEventListener('click', function() { document.getElementById('address').value = defaultAddress; // 恢复默认值 }); }); </script>
这段代码首先保存address input元素的默认值，然后在用户点击“恢复默认地址”按钮时，将input元素的值恢复为保存的默认值。
