<form action="/my-handling-form-page" method="post">
  <ul>
	<li>
  	<label for="name">Name:</label>
  	<input type="text" id="name" name="user_name" />
	</li>
	<li>
  	<label for="mail">Email:</label>
  	<input type="email" id="mail" name="user_email" />
	</li>
	<li>
  	<label for="msg">Message:</label>
  	<textarea id="msg" name="user_message"></textarea>
	</li>

	<li class="button">
  	<button type="submit">Send your message</button>
	</li>
  </ul>
</form>

body {
 /* ضبط موقع الاستمارة منتصف الصفحة */
 text-align: center;
}

form {
 display: inline-block;
 /* اﻹطار الخارجي للاستمارة */
 padding: 1em;
 border: 1px solid #ccc;
 border-radius: 1em;
}

ul {
 list-style: none;
 padding: 0;
 margin: 0;
}

form li + li {
 margin-top: 1em;
}

label {
 /* تنسيق الحجم والمحاذاة بشكل منتظم */
 display: inline-block;
 min-width: 90px;
 text-align: right;
}

input,
textarea {
 /*للتأكد من أن كل الحقول النصية لها نفس إعدادات الخط
 monospace خط أحادي الفراغ textarea افتراضيًا، يكون للعناصر */
 font: 1em sans-serif;
 /* حجم متساوي لجميع الحقول النصية */
 width: 300px;
 box-sizing: border-box;
 /* ضبط حواف حقول الاستمارة */
 border: 1px solid #999;
}

input:focus,
textarea:focus {
 /* تظليل إضافي للعناصر التي تتلقى تركيز الدخل */
 border-color: #000;
}

textarea {
 /* محاذاة الحقول النصية إلى جوار عناوينها*/
 vertical-align: top;
 /* تأمين مساحة للكتابة ضمنها */
 height: 5em;
}

.button {
 /* محاذاة الزر مع الحقول النصية */
 padding-left: 90px; /* نفس قياس العناوين */
}

button {
 /*هوامش إضافية تماثل المسافة بين العناوين والحقول النصية المقابلة */
 margin-left: 0.5em;
}