標題：簡單 CSS 表單制作代碼

隨著互聯網的普及，表單已經成為了我們日常生活中不可或缺的一部分。表單可以是簡單的文本輸入框，也可以是復雜的交互式表單，可以用于提交信息、過濾數據等場景。在制作表單時，通常需要使用 HTML 和 CSS 來美化表單樣式和布局，使得表單更加美觀和易于使用。下面，我將介紹一個簡單的 CSS 表單制作代碼，供您參考。

HTML 代碼示例：

```html

<form>

<label for="username">用戶名：</label>

<input type="text" id="username" name="username" required>

<br>

<label for="password">密碼：</label>

<input type="password" id="password" name="password" required>

<br>

<button type="submit">提交</button>

</form>

CSS 代碼示例：

```css

form {

display: flex;

flex-direction: column;

align-items: center;

margin-top: 50px;

label {

margin-bottom: 10px;

font-size: 16px;

font-weight: bold;

input[type="text"], input[type="password"] {

padding: 10px;

border: 1px solid #ccc;

border-radius: 5px;

width: 100%;

button[type="submit"] {

background-color: #4CAF50;

color: white;

padding: 10px 20px;

border: none;

border-radius: 5px;

cursor: pointer;

button[type="submit"]:hover {

background-color: #3e8e41;

以上代碼使用了 Flexbox 布局，將表單分為兩個部分，頭部和底部。頭部使用 `display: flex` 將表單元素垂直居中，并設置了一些間距和垂直方向的屬性。底部使用 `margin-top: 50px` 將表單元素向上拉50px。

在 CSS 中，我們使用了 `border` 屬性來設置表單元素的邊框樣式，并使用 `border-radius` 屬性來設置圓角的大小。同時，我們還使用了 `padding` 屬性來設置表單元素的內邊距和邊距。

在表單的輸入字段中，我們使用了 `padding` 和 `border` 屬性來美化輸入字段的樣式。輸入字段的圓角大小使用 `border-radius` 屬性設置，同時輸入字段的邊框樣式使用 `border` 屬性設置。

最后，我們使用了 `button[type="submit"]` 元素來設置表單的提交按鈕樣式，并使用 `hover` 屬性將提交按鈕的樣式設置為懸停狀態，以便用戶可以在點擊提交按鈕時更加美觀地顯示表單。

通過以上簡單的 CSS 表單制作代碼，我們可以制作出一個美觀、易于使用的表單。在實際使用時，我們可以根據實際情況進行修改和調整，使表單更加符合實際需求。