实现表单修改信息功能（个人中心）

最终效果：

 点击修改按钮 收货地址和保存按钮可用 修改按钮不可用

更改完后点击保存按钮 弹出提示框更改成功 恢复初始状态（修改按钮变为可用 保存按钮不可用）

css：

 body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #a8977f;
        }
        .container {
            width: 800px;
            height:500px;
            margin: 0 auto;
            background-color: #9dafa2;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }
        h1 {
            text-align: center;
            color: #333;
        }
        .x{
            width: 100px;
            height: 100px;
            border-radius: 50%;
            overflow: hidden;
        }

        #form{
        position:absolute;
          left:700px;
          top:150px;
          }
        #save{
        position:absolute;
          left:850px;
          top:500px;
          width:100px;
          height:30px;
          color:61dafb;
        }
         #edit{
        position:absolute;
          left:650px;
          top:500px;
          width:100px;
          height:30px;
          color:61dafb;
        }
        dd{
        font-size:18px;
        position:absolute;
        left:350px;
        top:240px;
        }
        p{
        text-decoration: underline;
        color:#3f5965;
        font-size:18px;
        position:relative;
        top:100px;
        }
        .myform{
        width:150px;
        height:50px;}
        #input5{
        weight:40px;
        height:50px;}

body:

  <div class="container">
        <h1>个人中心</h1>
        <div class="x">
            <img src="/static/img/07.jpeg" alt=" ">
        </div>
        <dd>用户01</dd>
        <p>我的收藏</p>
        <p>历史订单</p>
        <div id ="form">
        <form class="myform">
        <label>IP属地:</label>
        <input type="text" id="input1" value="湖北" disabled>
        </form>
        <form class="myform">
        <label>性别:</label>
        <input type="text" id="input2" value="男" disabled>
        </form>
        <form class="myform">
        <label>电     话:</label>
        <input type="text" id="input3" value="1234567890" disabled>
        </form>
        <form class="myform">
        <label>邮     箱:</label>
        <input type="text" id="input4" value="123456789@qq.com" disabled>
        </form>
        <form class="myform">
        <label for="dress">收货地址:</label>
        <input type="text" id ="dress" value="123大学" disabled>
        </form>
        </div>
        <button id ="edit" onclick="edit()">修改</button>
        <button id ="save" onclick="save()" disabled id="saveBtn">保存</button>
    </div>

JavaScript：

<script>
   function edit() {
            var dressInput = document.getElementById('dress');
            var saveBtn=document.getElementById('save');
            dressInput.removeAttribute('disabled');
            saveBtn.removeAttribute('disabled');
            var editBtn=document.querySelector('button[onclick="edit()"]');
            editBtn.setAttribute('disabled','disabled');
            editBtn.style.cursor='not-allowed';}

   function save() {
            var dressInput = document.getElementById('dress');
            var saveBtn=document.getElementById('save');
                alert("保存成功");
            dressInput.setAttribute('disabled','disabled');
            saveBtn.setAttribute('disabled','disabled');
            var editBtn = document.querySelector('button[onclick="edit()"]');
            editBtn.removeAttribute('disabled');
            editBtn.style.cursor = 'pointer';
        }
</script>

最左边的使只做了一个下划线的效果 你们可以根据情况自己加超链接跳转 然后点击修改之后也只有收货地址可以修改 你们可以根据情况自行调整