Form input in Laravel - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a text input field named 'username' in a Laravel Blade form.

Laravel

<input type="text" name="[1]" />

Drag options to blanks, or click blank then click option'

Apassword

Bemail

Cusername

Duser

Attempts:

3 left

💡 Hint

Common Mistakes

Using a different name like 'user' or 'email' which does not match the field purpose.

The name attribute should be set to 'username' to match the input field's purpose.

2fill in blank

medium

Complete the code to create a password input field using Laravel Blade syntax.

Laravel

[1]('password')

Drag options to blanks, or click blank then click option'

AForm::password

BForm::text

CForm::email

DForm::checkbox

Attempts:

3 left

💡 Hint

Common Mistakes

Using Form::text which creates a visible text input.

Using Form::email which is for email inputs.

Use Form::password to create a password input field in Laravel Blade.

3fill in blank

hard

Fix the error in the Blade form code to correctly create a checkbox input named 'subscribe'.

Laravel

[1]('subscribe', 1, false)

Drag options to blanks, or click blank then click option'

AForm::checkbox

BForm::radio

CForm::text

DForm::select

Attempts:

3 left

💡 Hint

Common Mistakes

Using Form::radio which creates radio buttons.

Using Form::text which creates text inputs.

Use Form::checkbox to create a checkbox input. The parameters are name, value, and checked state.

4fill in blank

hard

Fill both blanks to create a select dropdown named 'country' with options from the $countries array.

Laravel

[1]('country', [2], null, ['class' => 'form-select'])

Drag options to blanks, or click blank then click option'

AForm::select

B$countries

C$users

DForm::checkbox

Attempts:

3 left

💡 Hint

Common Mistakes

Using Form::checkbox instead of Form::select.

Passing wrong variable like $users instead of $countries.

Form::select creates a dropdown. The second argument is the options array, here $countries.

5fill in blank

hard

Fill all three blanks to create a textarea named 'message' with default text and a CSS class.

Laravel

[1]('message', [2], ['class' => [3]])

Drag options to blanks, or click blank then click option'

AForm::textarea

B'Enter your message here...'

C'form-control'

DForm::text

Attempts:

3 left

💡 Hint

Common Mistakes

Using Form::text which creates a single-line input.

Not providing a class attribute for styling.

Form::textarea creates a multi-line text input. The second argument is the default text, and the third is an array of HTML attributes like class.

Practice

1. What is the main purpose of adding a name attribute to an input field in a Laravel form?

easy

A. It identifies the input data when the form is submitted

B. It styles the input field with CSS

C. It disables the input field

D. It adds a placeholder text inside the input

Solution

1. Step 1: Understand the role of the name attribute

   The name attribute is used to label the input data so the server can identify it when the form is submitted.

2. Step 2: Recognize other options are unrelated to data submission

   Styling, disabling, or placeholder text do not affect how data is sent to the server.

3. Final Answer:

   It identifies the input data when the form is submitted -> Option A

4. Quick Check:

   Input name = data key [OK]

Hint: Name attribute links input to server data key [OK]

Common Mistakes:

• Confusing name with styling or placeholder
• Thinking name disables input
• Ignoring name causes missing data on submit

2. Which of the following is the correct way to include CSRF protection in a Laravel Blade form?

easy

A. <form> @csrf </form>

B. <form> <csrf> </form>

C. <form> <input type='csrf'> </form>

D. <form> <token> @csrf </form>

Solution

1. Step 1: Recall Laravel's CSRF directive

   Laravel uses the Blade directive @csrf inside forms to add a hidden CSRF token input automatically.

2. Step 2: Check syntax correctness

   Only @csrf is valid; other tags like <csrf> or <token> are invalid HTML or Blade syntax.

3. Final Answer:

   <form> @csrf </form> -> Option A

4. Quick Check:

   Use @csrf in Blade forms [OK]

Hint: Use @csrf inside Blade forms for security [OK]

Common Mistakes:

• Writing invalid HTML tags like <csrf>
• Forgetting to add CSRF token causes errors
• Using input type='csrf' which is not valid

3. Given this Blade form snippet:

<form method="POST" action="/submit">
  @csrf
  <input type="text" name="username" value="John">
  <button type="submit">Send</button>
</form>

What will request('username') return in the controller after submission?

medium

A. null

B. An error because value attribute is ignored

C. "John"

D. "username"

Solution

1. Step 1: Understand form input and value attribute

   The input has name="username" and value="John", so the form sends "John" as the username.

2. Step 2: Recall how Laravel's request() works

   Calling request('username') retrieves the submitted value for the input named "username".

3. Final Answer:

   "John" -> Option C

4. Quick Check:

   Input value sent = request('name') [OK]

Hint: Input value attribute sets default sent data [OK]

Common Mistakes:

• Thinking value attribute is ignored on submit
• Expecting request('username') to return the name string
• Confusing request() with old() helper

4. Identify the error in this Laravel Blade form snippet:

<form method="POST" action="/save">
  <input type="text" name="email">
</form>

medium

A. Input name attribute is not allowed

B. Input type should be 'email' not 'text'

C. Form action URL is invalid

D. Missing @csrf directive for security

Solution

1. Step 1: Check for CSRF protection in POST forms

   Laravel requires a CSRF token in POST forms to prevent attacks. This form lacks @csrf.

2. Step 2: Validate other parts

   Input type 'text' is allowed for emails (though 'email' is better), action URL is valid, and name attribute is required.

3. Final Answer:

   Missing @csrf directive for security -> Option D

4. Quick Check:

   POST forms need @csrf [OK]

Hint: Always add @csrf in POST forms [OK]

Common Mistakes:

• Forgetting @csrf causes 419 error
• Thinking input type must be 'email' for emails
• Assuming action URL must be absolute

5. You want to create a form that submits a user's age but only accepts numbers between 18 and 99. Which is the best way to enforce this in a Laravel Blade form input?

hard

A. <input type="text" name="age" pattern="[18-99]">

B. <input type="number" name="age" min="18" max="99" required>

C. <input type="number" name="age" min="18" max="99">

D. <input type="text" name="age" required>

Solution

1. Step 1: Use input type number with min and max attributes

   Setting type="number" with min="18" and max="99" restricts input to numbers in that range.

2. Step 2: Add required to ensure user cannot submit empty

   This makes the field mandatory, improving validation before submission.

3. Final Answer:

   <input type="number" name="age" min="18" max="99" required> -> Option B

4. Quick Check:

   Number input with min/max and required [OK]

Hint: Use number input with min, max, and required [OK]

Common Mistakes:

• Using text input with incorrect pattern syntax
• Omitting required allows empty submission
• Using min/max without input type number