<!DOCTYPE html><br/><html lang="zh"><br/><head><br/> <meta charset="UTF-8" /><br/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/><br/> <title>征婚网注册</title><br/> <style><br/> body {<br/> font-family
: "Microsoft YaHei", sans-serif;<br/> background-color
: #f5f5f5;<br/> display
: flex;<br/> justify-content
: center;<br/> align-items
: center;<br/> height
: 100vh;<br/> margin
: 0;<br/> }<br/> .form-container {<br/> width
: 400px;<br/> padding
: 30px;<br/> background
: white;<br/> border-radius
: 10px;<br/> box-shadow
: 0 4px 10px rgba(0,0,0,0.1);<br/> }<br/> h2 {<br/> text-align
: center;<br/> color
: #d63384;<br/> }<br/> .input-group {<br/> margin-bottom
: 15px;<br/> }<br/> label {<br/> display
: block;<br/> margin-bottom
: 5px;<br/> font-weight
: bold;<br/> }<br/> input[type="text"], input[type="tel"], select {<br/> width
: 100%;<br/> padding
: 8px;<br/> border
: 1px solid #ccc;<br/> border-radius
: 5px;<br/> }<br/> .checkbox-group {<br/> display
: flex;<br/> flex-wrap
: wrap;<br/> gap
: 10px;<br/> }<br/> .checkbox-item {<br/> display
: flex;<br/> align-items
: center;<br/> }<br/> .checkbox-item input {<br/> margin-right
: 5px;<br/> }<br/> .btn-group {<br/> display
: flex;<br/> justify-content
: space-between;<br/> margin-top
: 20px;<br/> }<br/> button {<br/> padding
: 10px 20px;<br/> border
: none;<br/> border-radius
: 5px;<br/> cursor
: pointer;<br/> }<br/> .reset-btn {<br/> background
: #6c757d;<br/> color
: white;<br/> }<br/> .login-btn {<br/> background
: #d63384;<br/> color
: white;<br/> }<br/> </style><br/></head><br/><body><br/><div class="form-container"><br/> <h2>征婚网</h2><br/> <div class="input-group"><br/> <label>性别：</label><br/> <div><br/> <input type="radio" id="male" name="gender" value="男" checked /><br/> <label for="male">男</label><br/> <input type="radio" id="female" name="gender" value="女" /><br/> <label for="female">女</label><br/> </div><br/> </div><br/> <div class="input-group"><br/> <label>出生年月：</label><br/> <select style="width
: 32%; display
: inline-block;"><br/> <option>请选择年</option><br/> <!-- 年份循环 --><br/> <script><br/> const year = new Date().getFullYear();<br/> for (let i = year; i >= 1950; i--) {<br/> document.currentScript.previousElementSibling.innerHTML += `<option>${i}</option>`;<br/> }<br/> </script><br/> </select><br/> <select style="width
: 30%; display
: inline-block;"><br/> <option>请选择月</option><br/> <script><br/> for (let i = 1; i <= 12; i++) {<br/> document.currentScript.previousElementSibling.innerHTML += `<option>${i}</option>`;<br/> }<br/> </script><br/> </select><br/> <select style="width
: 30%; display
: inline-block;"><br/> <option>请选择日</option><br/> <script><br/> for (let i = 1; i <= 31; i++) {<br/> document.currentScript.previousElementSibling.innerHTML += `<option>${i}</option>`;<br/> }<br/> </script><br/> </select><br/> </div><br/> <div class="input-group"><br/> <label>所在地区：</label><br/> <input type="text" value="奋斗者之家"
readonly /><br/> </div><br/> <div class="input-group"><br/> <label>婚姻状况：</label><br/> <div><br/> <input type="radio" id="single" name="status" value="单身" checked /><br/> <label for="single">单身</label><br/> <input type="radio" id="unmarried" name="status" value="未婚" /><br/> <label for="unmarried">未婚</label><br/> <input type="radio" id="divorced" name="status" value="离异" /><br/> <label for="divorced">离异</label><br/> </div><br/> </div><br/> <div class="input-group"><br/> <label>学历：</label><br/> <input type="text" value="小学"
readonly /><br/> </div><br/> <div class="input-group"><br/> <label>月薪：</label><br/> <input type="text" value="1000~100000"
readonly /><br/> </div><br/> <div class="input-group"><br/> <label>手机号：</label><br/> <input type="tel" placeholder="请输入手机号" /><br/> </div><br/> <div class="input-group"><br/> <label>昵称：</label><br/> <input type="text" placeholder="请输入昵称" /><br/> </div><br/> <div class="input-group"><br/> <label>喜欢的类型：</label><br/> <div class="checkbox-group"><br/> <div class="checkbox-item"><input type="checkbox" /> <label>爱打篮球</label></div><br/> <div class="checkbox-item"><input type="checkbox" /> <label>温柔</label></div><br/> <div class="checkbox-item"><input type="checkbox" /> <label>可爱</label></div><br/> <div class="checkbox-item"><input type="checkbox" /> <label>小鲜肉</label></div><br/> <div class="checkbox-item"><input type="checkbox" /> <label>御姐</label></div><br/> <div class="checkbox-item"><input type="checkbox" /> <label>萝莉</label></div><br/> </div><br/> </div><br/> <div class="input-group"><br/> <label>自我介绍：</label><br/> <textarea rows="3" style="width
:100%; padding
:8px; border
:1px solid #ccc; border-radius
:5px;" placeholder="请填写自我介绍"></textarea><br/> </div><br/> <div class="input-group"><br/> <div><input type="checkbox" checked /> 我承诺年满18岁、单身</div><br/> <div><input type="checkbox" checked /> 抱着严肃的态度</div><br/> <div><input type="checkbox" checked /> 真诚寻找另一半</div><br/> <div><input type="checkbox" /> 我同意注册条款和会员加入标准</div><br/> </div><br/> <div class="btn-group"><br/> <button class="reset-btn">RESET</button><br/> <button class="login-btn">登录</button><br/> </div><br/></div><br/></body><br/></html>
本文记录了作者在使用JavaScript设置文本框只读属性时遇到的问题及解决过程。指出正确的设置方式为使用readOnly=true，强调JavaScript中大小写的敏感性。
扫一扫
652
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
