<!DOCTYPE html>
<html>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
    crossorigin="anonymous"></script>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <!-- เรียกใช้ Bootstrap 5 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css"
        integrity="sha512-jRcyS0JzoOe9Mq3OEn5Q+U67/l7o+f+B2dG1mVWmHJ+ud7M9XmFmB7GJj6o4b4Yl+SGoSyKkfcf1FbzN1Sd9zA=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Prompt">
    <style>
        body {
            font-family: 'Prompt';
        }

        .nav {

            box-sizing: border-box;
      width: 305px;
      height: 1024px;
      left: 0px;
      top: 0px;
      background: #ffffff;
      border: 1px solid rgba(0, 0, 0, 0.3);
      font-style: normal;
      font-weight: 400;
      font-size: 24px;

        }

        .h1 {
            position: absolute;
            width: 400px;
            height: 48px;
            left: 435px;
            top: 116px;
        }

        .row {
            box-sizing: border-box;
            position: absolute;
            width: 928px;
            height: 750px;
            left: 405px;
            top: 230px;

            background: #FFFFFF;
            border: 1px solid;
            border-radius: 10px;

        }




        .a1 {
            display: flex;
            flex-direction: row;
            align-items: center;
        }

        .a1 input {
            width: 322px;
            height: 30px;
            border: none;
            border-bottom: 1px solid black;
            border-radius: 0px;
            margin-right: 10px;
        }

        .a212 {
            display: flex;
            flex-direction: row;
            align-items: center;
        }

        .a212 input {
            width: 151px;
            height: 30px;
            border: none;
            border-bottom: 1px solid black;
            border-radius: 0px;
            margin-right: 10px;
        }

        .a2 {
            display: flex;
            flex-direction: row;
            align-items: center;
        }

        .a2 .form-check {
            display: flex;
            flex-direction: row;
            align-items: center;
        }

        .a3 {
            display: flex;
            flex-direction: row;
            align-items: center;
        }

        .a3 input {
            width: 538px;
            height: 30px;
            border: none;
            border-bottom: 1px solid black;
            border-radius: 0px;
            margin-right: 10px;
        }

        .a4 {
            display: flex;
            flex-direction: row;
            align-items: center;
        }

        .a4 input {
            width: 490px;
            height: 30px;
            border: none;
            border-bottom: 1px solid black;
            border-radius: 0px;
            margin-right: 10px;
        }

        .a5 {
            display: flex;
            flex-direction: row;
            align-items: center;
        }

        .a5 input {
            width: 129.7px;
            height: 30px;
            border: none;
            border-bottom: 1px solid black;
            border-radius: 0px;
            margin-right: 10px;
        }

        #validationCustom03 {
            width: 290px;
            height: 30px;
            border: none;
            border-bottom: 1px solid black;
            border-radius: 0px;
            margin-right: 10px;
        }

        .a6 {
            display: flex;
            flex-direction: row;
            align-items: center;
        }

        .a6 input {
            width: 130px;
            height: 30px;
            border: none;
            border-bottom: 1px solid black;
            border-radius: 0px;
            margin-right: 10px;
        }

        #name {
            width: 459px;
        }

        .a7 {
            display: flex;
            flex-direction: row;
            align-items: center;
        }

        .a7 input {
            width: 156.8px;
            height: 30px;
            border: none;
            border-bottom: 1px solid black;
            border-radius: 0px;
            margin-right: 10px;
        }

        .a8 {
            display: flex;
            flex-direction: row;
            align-items: center;
        }

        .a8 input {
            width: 228px;
            height: 30px;
            border: none;
            border-bottom: 1px solid black;
            border-radius: 0px;
            margin-right: 10px;
        }
        .a9 {
            display: flex;
            flex-direction: row;
            align-items: center;
        }

        .a9 input {
            height: 30px;
            border: none;
            border-bottom: 1px solid black;
            border-radius: 0px;
            margin-right: 10px;
        }
        #country{
            width: 200px;

        }
        #phonenumber{
            width: 455px;
        }

        
        
    </style>
</head>

<body>
    <nav class="navbar navbar-light bg-light border border-primary">
        <div class="container-fluid">
            <a class="btn btn-outline-success">Navbar</a>
            <form class="d-flex">
                <button class="btn btn-outline-success me-2" type="submit">
                    name
                </button>
                <button class="btn btn-outline-success" type="submit">out</button>
            </form>
        </div>
    </nav>
    <div class="h1 text-center ">ลงทะเบียนสมาชิก</div>


    <ul class="nav flex-column >
        <li class=" nav-item">
      <a class="nav-link" href="#">ลงทะเบียนสมาชิก</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">อนุมัติสมาชิก</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">คำนวนเงิน</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">ปรับปรุงข้อมูลสมาชิก</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">หลักฐานการแจ้งฝากเงิน</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">รายงาน</a>
      </li>
    </ul>


    <form class="row border border-primary ">
        <div class="a m-5">
            ได้ทราบข้อบังคับของการฌาปนกิจสงเคราะห์สภาทนายความ และเห็นชอบด้วย
            จึงขอแจ้งความประสงค์สมัครเข้าเป็นสมาชิก
            <br> การฌาปนกิจสงเคราะห์สภาทนายความ
            และขอให้ถ้อยคำเป็นลายลักษณ์อักษรต่อคณะกรรมการฌาปนกิจสงเคราห์
            ดังนี้
        </div>
        <div class="a1">
            ข้อ 1. ข้าพเจ้า เกิดวันที่ &nbsp;<input type="date" id="Birthday" name="Birthday"> ปัจจุบันอายุ
            <input type="text" class="form-control" id="validationCustom01">
        </div>
        &nbsp; ข้อ 2. ข้าพเจ้า
        <div class="a2">
            <p class="text">
            <div class="a21 mx-5">
                2.1 เป็นทนายความประเภท
                <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1" checked>
                <label class="form-check-label" for="flexRadioDefault1">
                    ตลอดชีพ
                </label>
            </div>
            <div class="form-check">
                <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault2">
                &nbsp;
                <label class="form-check-label" for="flexRadioDefault2">
                    สองปี
                </label>
                <div class="b21 ms-4">
                    ใบอนุญาติเลขที่
                </div>
                <div class="a212 ms-4">
                    <input type="text" class="form-control" id="validationCustom01">
                    <a>/</a>
                    <input type="text" class="form-control" id="validationCustom01">
                </div>
            </div>
            </p>
        </div>
        <div class="a3 mx-5">
            2.2 เป็นพนักงานประจำสภาทนายความสังกัด &nbsp;
            <input type="text" class="form-control" id="validationCustom01">

        </div>
        <div class="a4 mx-5">
            2.3 เป็นบุคคลในครอบครัวของ (นาย/นาง/นางสาว) &nbsp;
            <input type="text" class="form-control" id="validationCustom01">
        </div>

        <div class="a5">
            ใบอนุญาตทนายความเลขที่ &nbsp;
            <input type="text" class="form-control" id="validationCustom01">
            <a>/</a>
            <input type="text" class="form-control" id="validationCustom01">
            โดยเกี่ยวข้องเป็น &nbsp;
            <input type="text" class="form-control" id="validationCustom03">
        </div>
        <div class="mt-2">
            ข้อ 3. เมื่อข้าพเจ้าถึงแก่ความตาย ข้อให้คณะกรรมการจ่ายเงินสงเคราะห์ ให้แก่ &nbsp;
        </div>


        <div class="a6">
            3.1 ชื่อ
            <input type="text" class="form-control" id="name">
            เกี่ยวข้องเป็น
            <input type="text" class="form-control" id="validationCustom03">
        </div>
        <div class="a7">
            อยู่บ้านเลขที่
            <input type="text" class="form-control" id="้homenumber">
            หมู่ที่
            <input type="text" class="form-control" id="villagenumber">
            หมู่บ้าน
            <input type="text" class="form-control" id="villagename">
            ตรอก/ซอย
            <input type="text" class="form-control" id="alley">
        </div>
        <div class="a8">
            ถนน
            <input type="text" class="form-control" id="rode">
            ตำบล/แขวง
            <input type="text" class="form-control" id="canton">
            อำเภอ/เขต
            <input type="text" class="form-control" id="district">
        </div>
        <div class="a9">
            จังหวัด
            <input type="text" class="form-control" id="country">
            โทรศัพท์ที่สามารถติดต่อได้
            <input type="text" class="form-control" id="phonenumber">
        </div>
        <div class="a10 text-center">
            เพิ่มข้อมูล
        </div>
        <div class="col-12 text-end">
            <a class="btn btn-secondary"
              href="http://127.0.0.1:5501/ลงทะเบียนสมาชิก.html"
              role="button">ย้อนกลับ</a>
              <a class="btn btn-primary"
              href=""
              role="button">ถัดไป</a>
          </div>
          
    </form>
</body>

</html>