The image below displays the code from forms.py that generates the textarea input box on the right side, with a placeholder text of "Your comment to the world".
https://i.sstatic.net/8CAGO.png
However, the CSS is only affecting the standard HTML textarea box on the left, and I am struggling to apply it to the Django-generated textarea. The CSS has been automatically applied to the 'Name' text input field at the top.
Here is the styles.css code:
body {
background-color: white;
}
h1 {
color: red;
text-shadow: 3px 2px grey;
font-family: Arial
}
p {
color: black;
font-family: Arial
}
input[type=text] {
width: 20%;
padding: 21px 20px;
margin: 14px 0;
box-sizing: border-box;
font-size: 33;
border: 2px solid red;
border-radius: 4px;
font-family: Arial
}
textarea[type=textarea] {
width: 20%;
padding: 21px 20px;
margin: 14px 0;
box-sizing: border-box;
font-size: 33;
border: 2px solid red;
border-radius: 4px;
font-family: Arial
}
Below is the code snippet for forms.py (which includes the rendered HTML):
from django import forms
class CommentForm(forms.Form):
name = forms.CharField(max_length=20,widget=forms.TextInput(attrs={'placeholder':'Your Name Please'}))
comment = forms.CharField(widget=forms.Textarea(attrs={'placeholder':'Your comment to the world'}))
Finally, here is the HTML code for the sign.html page:
{% load static %}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="{% static 'guestbook/styles.css' %}">
</head>
<body>
<h1>Tell the world how you're doing!</h1>
<h2>Sign the guestbook</h2>
<form action="/action_page.php">
Enter your name:<br>
<!--<input type="text" name="name" placeholder="Your Name here">-->
{{form.name}}
<br>
Enter your comment:<br>
<textarea name="message" type="Textarea" placeholder="Your comment here" rows="10" cols="30"></textarea>
{{form.comment}}
<br><br>
<input type="button" value="Submit">
</form>
<p>If you click the "Submit" button, the form-data will be sent to a page called "/action_page.php".</p>
<p>Go to the <a href="{% url 'index' %}"> guestbook </a> itself</p>
</body>
</html>
In essence, my goal is to understand how to create a functional HTML object and apply CSS to it seamlessly.