#Form IN CSS | Explore Tumblr posts and blogs

qdrew · 2 months ago

Text

As Unspeakable Hermione Granger found out, summoning ghosts is incredibly easy. The difficult part is figuring out what to do with them. If she can ever stop summoning them, that is.

Read on AO3

#my fics #new fic #Unspeakables fest #figments & spectres & ghosts oh my!#this is an epistolary work!#I did a lot of CSS!#and I didn’t cry!#which was very brave of me #sevmione #snamione #snanger #sshg #severus snape x hermione granger #with a scene stealing Ron!#who is modeled off of my frog uncle!#who is just as cute and charming not in fic form!

13 notes · View notes

haloslips · 4 months ago

Text

submitted to the entire human experience today which is to say i woke up at 5am just because with an ao3 subscription email in my inbox and took a mid-morning train up to my bestie and then we drove 3 hours into the mountains where we had a perfect day including great food and lemon curd ice cream and splashing around in the river and then as we settled into the beer garden for dinner i realized i had heat exhaustion bc it was 100 degrees outside (not an exaggeration) so i went back to the hotel while bestie and her husband finished dinner and they came back and brought me electrolyte packets so i drank strawberry lemonade saltwater but now i'm alive again and i took a shower and i'm staring down the fandom trumps hate playbook so kas and i can launch our sports rpf auction soon and i will actually understand some part of it other than the website which i have been slowly building from scratch while taking a javascript class even though i think the javascript understanding i'm going to need to use google scripts is like minimal at best

#meanwhile across the hotel room from me bestie & husband are watching game changer episodes #in the morning we're going on a trail ride through the mountain forest #i haven't been on a horse in at least 7 years despite spending the first 18 years more on horseback than walking #is anyone else reading maraschino on hrpf ao3 btw can we please discuss i'm going crazy #also shoutout to kas for real for actually doing everything for this auction while i dick around w css #kas: btw i completely reformatted every google form template to work for us #me: look i put a hockey puck background in the div!#in fairness tho when i pitched myself as an associate i did say my experience was in leading neopets guilds

9 notes · View notes

divinector · 3 months ago

Text

Login Form Design in HTML & CSS

#login form design #html css form #css form #glassmorphism #html css #divinector #css #frontenddevelopment #webdesign #html #css3 #form html css #form html #learn to code #html5 css3

4 notes · View notes

codingflicks · 15 days ago

Text

CSS Transparent Login Form

#transparent login form #html css login form #login from css #codingflicks #html css #frontend #css #html #frontenddevelopment #css3 #learn to code #webdesign #html css form #css form #html5

3 notes · View notes

gaydryad · 4 months ago

Text

making slow progress toward a (vaguely) dynamic pokémon custom team template that mimics the Bulbapedia team flyout and after ... a ... While ... of essentially redesigning the element hierarchy from scratch with the help of a friend who is MUCH better at programming than me, it is beginning to Look

(the Absol screenshot was just one I had on hand for a stand-in, my final one will probably look a little different since I want to also add Mega / Partner Pokemon indicators if possible, and to also just tweak the info hierarchy a bit)

#from the writer's den #void talks #getting those corners on the moves was ROUGH. initially it was a table structure but after much struggle #my friend found an implementation that just uses css wizardry instead of html #also for anyone curious: the reason I say it's vaguely dynamic is bc it's actually a jinja template and html #with my vague idea being that essentially it prints out pages for any arbitrary team #(though obviously the pages themselves will be static)#also for those familiar with bulbapedia #I wanted to have a proper 'neuter' gender marker so my eventual goal is to write a little if-then in the jinja file #that allows it to convert to arbitrary symbols (to display) in addition to having the custom colors (in the css)#probably in the form of a 'if [m] / elif [f] / else' for the colors #this is solely bc there's enough neutral-gender pokemon on my oc teams that I want it to actually be indicated #where absence actually means unspecified

4 notes · View notes

bielobog-kun · 1 year ago

Text

tell them i died doing what i hate the most. fighting with React hooks

#i could be making beautiful css layouts and instead i have to prefill forms from a database

1 note · View note

webtutorsblog · 2 years ago

Text

Learn HTML Tags with WebTutor.dev: Your Ultimate Resource for Web Development Tutorials

HTML (Hypertext Markup Language) is the backbone of the web. It is the standard markup language used to create web pages. HTML consists of a series of tags that define the structure and content of a web page. In this blog post, we will dive deeper into HTML tags, what they are, and how they work.

HTML tags are the building blocks of a web page. They are used to define the structure and content of a web page. HTML tags are surrounded by angle brackets (<>) and are written in lowercase. There are two types of HTML tags: opening tags and closing tags. An opening tag is used to start a tag, and a closing tag is used to end it. For example, the opening tag for a paragraph is <p>, and the closing tag is </p>.

HTML tags can also have attributes, which provide additional information about the tag. Attributes are included in the opening tag and are written as name-value pairs. For example, the <img> tag is used to embed an image on a web page. The src attribute is used to specify the URL of the image. The alt attribute is used to provide a description of the image for users who cannot see it.

HTML tags can be used to define headings, paragraphs, links, images, lists, tables, forms, and more. Here are some examples of commonly used HTML tags:

<html>: Defines the document as an HTML document

<head>: Defines the head section of the document, which contains metadata such as the page title and links to external files

<title>: Defines the title of the document, which appears in the browser's title bar

<body>: Defines the body section of the document, which contains the content of the page

<h1> to <h6>: Defines HTML headings of different sizes, with <h1> being the largest and <h6> being the smallest

<p>: Defines a paragraph

<a>: Defines a hyperlink to another web page or a specific location on the same page

<img>: Defines an image to be displayed on the page

<ul> and <ol>: Defines unordered and ordered lists, respectively

<table>: Defines a table

<form>: Defines a form for user input

<br>: Inserts a line break

<hr>: Inserts a horizontal rule

<strong>: Defines text as important or emphasized

<em>: Defines text as emphasized

<blockquote>: Defines a block of quoted text

<cite>: Defines the title of a work, such as a book or movie

<code>: Defines a piece of code

<pre>: Defines preformatted text, which preserves spaces and line breaks

<sup> and <sub>: Defines superscript and subscript text, respectively

<div>: Defines a section of the page for grouping content

<span>: Defines a small section of text within a larger block of text for styling purposes

Learning HTML can seem daunting, but with the right resources, it can be easy and enjoyable. One such resource is WebTutor.dev, an online platform that provides tutorials on web development, including HTML. The tutorials are easy to follow and provide a hands-on learning experience. The platform also offers quizzes to test your knowledge and a community forum to connect with other learners and ask questions.

In conclusion, HTML tags are the building blocks of a web page. They define the structure and content of a web page and can be used to create headings, paragraphs, links, images, lists, tables, forms, and more. If you are interested in learning HTML, check out WebTutor.dev for easy-to-follow tutorials and a supportive community of learners.

2 notes · View notes

bedicoder · 2 years ago

Text

Glowing Search Box Form Effect using HTML & CSS

youtube

#front end development roadmap #youtube #htmlcss #webdesign #webdevelopment #tutorials #coding #frontend #learn css #css tutorial #csstricks #css effects #glowing #glowing effect #search form #search bar #learn #Youtube

4 notes · View notes

holmoris · 1 year ago

Text

a modest proposal

right bar can be adroll (remove interstitials entirely) or just flex middle larger, just give us the unread posts from mutuals tabs + saved search activity i beg of you

Hey @staff just wondering did any of you ever study web design

Just feels like you're intentionally making the desktop interface an inhospitable place in order to drive users toward the app or off the site entirely. Is that what you were going for? If so good job I guess.

#i hate css #tumblr #also obviously vary the repeated SVGs for home/etc but that's more effort than the rest of this took entirely #also needs some form of bg color gutter to show the bar avatars slide along and obv slightly better spacing

36K notes · View notes

jcmarchi · 21 days ago

Text

When Website Builder Tools Get in the Way of Best Practices – Speckyboy

New Post has been published on https://thedigitalinsider.com/when-website-builder-tools-get-in-the-way-of-best-practices-speckyboy/

When Website Builder Tools Get in the Way of Best Practices – Speckyboy

We talk a lot about web design best practices. The tenets of accessibility, performance, resiliency, and security should be part of every project. They’re essential to a successful outcome.

It doesn’t always work that way out of the box, though. We are becoming more dependent on site-building tools. As such, we rely on them to do things the right way.

These tools aim to simplify the design and build processes. Some do it very well. But there’s a side effect: They take control of the output. And there’s no guarantee that they’ll employ best practices.

It’s an issue as old as the WYSIWYG editor. The difference is that it’s harder to override any problematic code.

There are some less-than-great tools on the market. Site builders that are outdated or deeply flawed. But even a great tool can get in the way. None of them are perfect.

Let’s look at a few scenarios when a tool hinders your ability to follow best practices. In addition, we’ll show you some ways to get around these issues.

Unlimited Downloads for Web Designers

Starting at just $16.50 per month, download 1,000s of HTML, Bootstrap, and Tailwind CSS, as well as WordPress themes and plugins with Envato Elements. You will also get unlimited access to millions of design assets, photos, video files, fonts, presets, addons, and much more.

How Site Builder Tools Can Impact Accessibility

It’s never a good idea to assume your website is accessible. Doing so is a risk. You might have created a poor user experience. At worst, the site may not be compliant with the law.

Site builder tools can make accessibility issues less obvious. For example, they may not warn you if you choose an inaccessible color scheme. Subtle color differences could make a big difference.

They might also produce code that isn’t semantic. That makes it harder for screen readers to interpret your content.

There’s also the implementation of special effects. You might add intense animations that are harmful to some users. The tool won’t always tell you the potential consequences. Thus, it’s up to you to use it responsibly.

Accessibility testing is the only way to know – regardless of how you built the site.

Included Features Aren’t Always the Best Option

Site builders often include advanced features. Elements like sliders, modal windows, and media players come to mind. These items are essential for some projects.

Their inclusion doesn’t speak to quality, though. The tool may produce inefficient or buggy code. The result is poor performance.

There’s also a chance of a conflict with other software like themes or plugins. And there’s no guarantee of browser compatibility.

There’s a high level of convenience with these features. You don’t have to search for a plugin that does x, y, and z – it’s already there. However, they’re not always the best fit for the job.

WordPress page builder plugins are an example. The one you use may come with a forms module. Awesome! But does it do everything you need? Are the forms accessible?

It’s worth doing an honest assessment of these items. Look at what they do. Run performance benchmarks. Monitor your browser console for errors. That will help you determine if it’s worth using.

If not, there are plenty of other options. You don’t always have to settle. And moving to a different solution could offer better results.

The Potential for Becoming Locked In

Sure, a site builder may claim to offer everything under the sun. But will it grow along with your needs? How portable is your site’s content?

You’ll want to know the answers sooner rather than later. Otherwise, you might be stuck with a tool that can’t keep up with you. And moving on can be a tedious process.

That happens with WordPress. A page builder plugin may no longer meet your needs. Or you might want to switch to the native Block Editor.

Making a change is possible. But it’s not always easy. Page builders often have different ways of outputting code. Thus, you might be left to reformat content piece by piece. The WordPress Data Liberation project aims to help with this.

The challenge is a bit different with proprietary systems. Not all of them offer third-party plugins. And some make it hard to move your site to a new provider.

Either way, it isn’t easy to rid yourself of monolithic tools. A modular approach is more efficient. It’s easier to swap elements or add new ones.

Site Builders Are Great – Just Be Realistic

There’s so much to consider when building a website. That’s why site builders are popular. They aim to provide an all-in-one experience. And there’s a lot to like about them.

But there are also some drawbacks. It doesn’t mean you should avoid them altogether, though. Consider the pros and cons before committing.

Look for reputable tools that have a history of stability. Review their features and determine how they fit into your project. Ideally, you’ll find one that will serve you well into the future.

It’s also a good idea to set realistic expectations. A site builder can’t possibly cover every use case. There are times when you’ll need to go outside the box.

With WordPress, that means finding a separate plugin to perform the function you want. On other systems, you may need to write custom code.

The goal should be a website that looks and functions how you want. It should also be flexible enough to accommodate growth. Tools play a significant role.

Keep that in mind throughout the process. It may save you a headache or two along the way.

Related Topics

Top

0 notes

just-1-voice · 2 months ago

Photo

Learn how web developers can mimic the input field's placeholder attribute for select form fields. Compatible with WordPress' Contact Form 7 and jQuery Validate. #WordPressExpert #RepublishedAutomatically Originally published on October 30th, 2023 https://aurisecreative.com/blog/2023/10/how-to-add-a-placeholder-to-a-select-field/?utm_source=tumblr&utm_medium=social&utm_campaign=revive

#CodeSnippets #CSS #Forms #WordPress #ContactForms #HowTo #ContactForm #WebDevelopment

0 notes

rubberbandballqueen · 3 months ago

Text

i was today years old when i learned that the tumblr cursive font has literally sixteen different stylistic sets and no ligatures.

why are they letting the double-l's just collide like that.

#the worm speaks #it also has contextual alternates (which is pretty much just punctuation i think)#and then also forms for titles (each letter looks more discrete); simple alternates (less looping about)#initial letters (start of some letters anchors to the baseline or doesn't have the starting connector)#swash caps (the caps swish out extra); isolated forms (some letters have neither starting nor ending connectors)#and then like a bunch of other single-letter substitutions or smth that don't form any stylistic sets #that i can't seem to figure out how to activate in css #but like. point is they made all these glyphs (bc they did like the entire extended latin alphabet w/every possible diacritic mark i think)#and then 0 ligatures. like??? this is a cursive-y font. be for real.

1 note · View note

divinector · 1 year ago

Text

Transparent Login Form with Blur Background

#login form #transparent login form #html css form #css form #html css #learn to code #code #frontenddevelopment #css #divinectorweb #html

7 notes · View notes

codingflicks · 22 days ago

Text

Contact Form Design

#contact form design #html css #frontend #css #html #frontenddevelopment #learn to code #css3 #webdesign #html css form #css form #html5 css3 form #html5 #login form design

3 notes · View notes

html-tute · 3 months ago

Text

HTML Forms

HTML forms are used to collect user input and send it to a server for processing. Forms are essential in web development for tasks like user registration, login, surveys, and more. Here’s a guide to understanding and creating HTML forms.

1. Basic Structure of an HTML Form

An HTML form is created using the <form> element, which contains various input elements like text fields, checkboxes, radio buttons, and submit buttons.<form action="/submit-form" method="post">  </form>

action: Specifies the URL where the form data will be sent.

method: Defines how the form data will be sent. Common values are GET (data sent in the URL) and POST (data sent in the request body).

2. Text Input Fields

Text input fields allow users to enter text. They are created using the <input> tag with type="text".<form action="/submit-form" method="post"> <label for="name">Name:</label> <input type="text" id="name" name="name"> <label for="email">Email:</label> <input type="email" id="email" name="email"> <input type="submit" value="Submit"> </form>

<label>: Associates a text label with a form control, improving accessibility.

type="text": Creates a single-line text input field.

type="email": Creates a text input field that expects an email address.

3. Password Field

A password field masks the input with dots or asterisks for security.<label for="password">Password:</label> <input type="password" id="password" name="password">

4. Radio Buttons

Radio buttons allow users to select one option from a set.<p>Gender:</p> <label for="male">Male</label> <input type="radio" id="male" name="gender" value="male"> <label for="female">Female</label> <input type="radio" id="female" name="gender" value="female">

type="radio": Creates a radio button. All radio buttons with the same name attribute are grouped together.

5. Checkboxes

Checkboxes allow users to select one or more options.<p>Hobbies:</p> <label for="reading">Reading</label> <input type="checkbox" id="reading" name="hobbies" value="reading"> <label for="traveling">Traveling</label> <input type="checkbox" id="traveling" name="hobbies" value="traveling">

type="checkbox": Creates a checkbox.

6. Dropdown Lists

Dropdown lists (select boxes) allow users to select one option from a dropdown menu.<label for="country">Country:</label> <select id="country" name="country"> <option value="bd">Bangladesh</option> <option value="us">United States</option> <option value="uk">United Kingdom</option> </select>

<select>: Creates a dropdown list.

<option>: Defines the options within the dropdown list.

7. Text Area

A text area allows users to enter multi-line text.<label for="message">Message:</label> <textarea id="message" name="message" rows="4" cols="50"></textarea>

<textarea>: Creates a multi-line text input field. The rows and cols attributes define the visible size.

8. Submit Button

A submit button sends the form data to the server.<input type="submit" value="Submit">

type="submit": Creates a submit button that sends the form data to the server specified in the action attribute of the form.

9. Reset Button

A reset button clears all the form inputs, resetting them to their default values.<input type="reset" value="Reset">

type="reset": Creates a button that resets the form fields to their initial values.

10. Hidden Fields

Hidden fields store data that users cannot see or modify. They are often used to pass additional information when the form is submitted.<input type="hidden" name="userID" value="12345">

11. File Upload

File upload fields allow users to select a file from their computer to be uploaded to the server.<label for="file">Upload a file:</label> <input type="file" id="file" name="file">

type="file": Creates a file upload input.

12. Form Validation

HTML5 introduces several form validation features, like the required attribute, which forces users to fill out a field before submitting the form.<label for="username">Username:</label> <input type="text" id="username" name="username" required>

required: Ensures the field must be filled out before the form can be submitted.

13. Grouping Form Elements

Fieldsets and legends can be used to group related form elements together.<fieldset> <legend>Personal Information</legend> <label for="fname">First Name:</label> <input type="text" id="fname" name="fname"> <label for="lname">Last Name:</label> <input type="text" id="lname" name="lname"> </fieldset>

<fieldset>: Groups related elements together.

<legend>: Provides a caption for the group of elements.

14. Form Action and Method

action: Specifies the URL where the form data should be sent.

method: Specifies how the data is sent. Common methods are GET and POST.

Key Takeaways

Forms are a crucial part of web development for gathering user input.

HTML provides a wide range of input types and elements to create various kinds of forms.

Properly labeling and grouping form elements enhances accessibility and usability.

Form validation helps ensure that the data submitted by users meets certain criteria before being sent to the server.

With these basics, you can start building functional forms for collecting data on your website!