使用表单标签和各属性以及表单控件制作一个信息登记表。登记表以<fieldset>标签对表单进行分组，使用CSS属性对表单内容进行布局，使用text-align-last属性对文字末尾对齐，再为各输入框添加内边距，属性值以em为单位，效果图如下。
时间: 2024-10-23 12:19:53 浏览: 43
HTML的表单form以及form内部标签的使用
为了创建一个信息登记表，你可以按照以下步骤使用HTML和CSS：
1. **HTML结构**:
首先，创建一个基本的HTML表格结构，使用`<form>`标签作为容器，包含多个`<fieldset>`元素，每个字段集用于表示一个表单部分，如个人信息、联系方式等。
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<form id="registration-form">
<fieldset class="section">
<legend>个人信息</legend>
<label for="name">姓名:</label>
<input type="text" id="name" name="name" style="padding: 0.5em 1em;">
<!-- 添加其他字段 -->
</fieldset>
<fieldset class="section">
<legend>联系方式</legend>
<label for="email">邮箱:</label>
<input type="email" id="email" name="email" style="padding: 0.5em 1em; text-align-last: end;">
<!-- 添加电话号码、地址等 -->
</fieldset>
<!-- ...更多字段... -->
<button type="submit">提交</button>
</form>
</body>
</html>
```
2. **CSS样式** (保存为styles.css):
使用CSS定义`fieldset`, `label`, 和 `input` 的样式，包括分组、文本对齐和内边距。
```css
/* 设置表单整体样式 */
form {
display: flex;
flex-direction: column;
}
fieldset {
border: 1px solid #ccc;
padding: 1em;
margin-bottom: 1em;
}
legend {
font-weight: bold;
}
/* 对齐文字末尾 */
label + input {
text-align-last: end;
}
/* 输入框样式 */
input[type="text"], input[type="email"] {
width: 100%;
box-sizing: border-box;
}
```
阅读全文
相关推荐
