Activity 2: Add Form and Input Types to Form.vue
2.1 打开 Form.vue ,在 template 标签之间添加以下代码,如下所示:
2.2 保存更改并转到表单页面,它将如下所示:
现在,我们有一个包含所需字段的基本简洁表单,但它缺乏视觉吸引力(正如您在屏幕截图中看到的那样!)。为了增强用户体验并使其更加用户友好,让我们使用 CSS 为其添加样式。
2.1 打开 Form.vue ,在 template 标签之间添加以下代码,如下所示:
2.2 保存更改并转到表单页面,它将如下所示:
现在,我们有一个包含所需字段的基本简洁表单,但它缺乏视觉吸引力(正如您在屏幕截图中看到的那样!)。为了增强用户体验并使其更加用户友好,让我们使用 CSS 为其添加样式。
<template>
<div class="form">
<h1>User Information Form / Credentials</h1>
<form>
<label for="username">Username:</label><br />
<input type="text" id="username" name="username" /><br />
<label for="password">Password:</label><br />
<input type="password" id="password" name="password" /><br />
<label for="isAustralian">Australian Resident?</label><br />
<input type="checkbox" id="isAustralian" name="isAustralian" /><br />
<label for="reason">Reason For Joining:</label><br />
<textarea id="reason" name="reason" rows="3"></textarea><br />
<label for="gender">Gender</label><br />
<select id="gender">
<option value="female">Female</option>
<option value="male">Male</option>
<option value="other">Other</option>
</select>
</form>
</div>
</template>课程目录