Add Form

Cristiano Magro

2025-01-07 c3947792db2af2178bdfdefde8b5f2c453fbb124

Add Form

for user input a new resource

 10 - course project/xno-prj-cmp-01-starting-setup/src/components/learning-resource/AddResource.vue

@@ -1,7 +1,54 @@
<template>
    <h2>Add Resource</h2>
  <h2>Add Resource</h2>
  <base-card>
    <form>
      <div class="form-control">
        <label for="title">Title</label>
        <input id="title" name="title" type="text" />
      </div>
      <div class="form-control">
        <label for="description">Description</label>
        <textarea id="description" name="description" type="text"  rows="3"></textarea>
      </div>
      <div class="form-control">
        <label for="link">Link</label>
        <input id="link" name="link" type="url" />
      </div>
      <div>
        <base-button type="submit">Add Resource</base-button>
      </div>
    </form>
  </base-card>
</template>

<script>export default{}</script>
<script>
export default {};
</script>

<style scoped></style>
<style scoped>
label {
  font-weight: bold;
  display: block;
  margin-bottom: 0.5rem;
}

input,
textarea {
  display: block;
  width: 100%;
  font: inherit;
  padding: 0.15rem;
  border: 1px solid #ccc;
}

input:focus,
textarea:focus {
  outline: none;
  border-color: #3a0061;
  background-color: #f7ebff;
}

.form-control {
  margin: 1rem 0;
}
</style>