<div class="container home">
<section class="flex">
<form action="" methods="post">
<input
type="text"
name="location"
required="required"
maxlength="50"
placeholder="enter tour location"
class="box" />
<input type="date" name="date" class="box" required="required" />
</form>
</section>
</div>
This is my code. I'm working on Vscode. I want to see attributes different line like first input tag.
I changed all settings like wrapAttributes auto to force or force-aligned, word wrap column value, wrap line length etc. but I couldnt find solution. Then I noticed when I write more than 5 attributes, Vscode automatically writes attriubutes on different line after save. When I enter 2 attributes, I want them to be written on different lines.
Related
On my html page I have:
......
<div class="col-md-3">
<input class="form-control" [(ngModel)]="manufacturer.name" [value]="manufacturer.name" maxlength="30" name="name" id="name" #name="ngModel" pattern="[\x20-\x7E]" required />
</div>
<div class="col-md-6">
<validation-message [control]="name" [message]="'Manufacturer Name must be an alphanumeric value of no more than 30 characters'"></validation-message>
</div>
......
Where I'm trying to restrict input to Ascii 32 to 126 inclusive. However, my Pattern doesn't seem to work. I cannot see what is wrong with it. Basically my validation message stays constantly on screen. How should I write my pattern?
I've tried many different ways, and nothing seems to add my custom field on my cart to the cart attributes like everywhere says you can. I don't understand. I've even used Shopify's UI generator and THAT's not working either. Here is the code I add:
<p class="cart-attribute__field">
<label for="your-name">Your name</label>
<textarea required class="required" id="your-name" name="attributes[Your name]">{{ cart.attributes["Your name"] }}</textarea>
</p>
Then I've tried this:
<div style="width:300px; clear:both;">
<p>
<label for="delivery_date">Pick a delivery date:</label>
<input required class="required" id="delivery_date" type="text" name="attributes[delivery_date]" value="{{ cart.attributes.delivery_date }}" />
<span style="display:block" class="instructions"> We do not deliver during the weekend.</span>
</p>
</div>
That doesn't work either, it has something to do with the attributes but I can't figure out what.
Anyone?
If you've pasted your code inside the <form>...</form> tags then the issue I see with your code is that setting the value is wrong:
<div style="width:300px; clear:both;">
<p>
<label for="delivery_date">Pick a delivery date:</label>
<input required class="required" id="delivery_date" type="date" name="attributes[delivery_date]" value="{{ cart.attributes["delivery_date"] }}" />
<span style="display:block" class="instructions"> We do not deliver during the weekend.</span>
</p>
</div>
You can see this working at a development store: https://kotn-eu.myshopify.com pwd skufom
In the liquid cart section, inside <form> tag you should add input or textarea with name attribute note.
For example:
...
<form action="/cart" method="post" novalidate>
...
<textarea name="note">{{ cart.note }}</textarea>
...
</form>
I am replicating a page, and wanted to know if I need to indent the form tag, if it is nested inside of a div tag. e.g.
<div class="signup-form">
<form method="post">
<input type="text" value="First Name">
<input type="text" value="Last Name">
</form>
Or do I write it without the indentation. e.g.
<div class="signup-form">
<form method="post">
<input type="text" value="First Name">
<input type="text" value="Last Name">
</form>
Thank you in advance.
Indentation in HTML does not matter, it is purely for readability.
For readability, in your example, I would indent.
I would indent because the form tag is contained within the div tag.
<div class="signup-form">
<form method="post">
<input type="text" value="First Name">
<input type="text" value="Last Name">
</form>
</div>
Indentation doesn't affect the way your markup is interpreted. You can follow a standard for readability or your own stylistic preference.
You could also let the IDE format the code for you...
Visual Studio: ctrl + k, ctrl + d
Sublime Text 3: Just select all lines ctrl + a and then from the menu select Edit → Line → Reindent
I am working on an app that uses Bootstrap. I have a column along the right side of the page (similar to the "asked", "viewed", "hot meta posts", "jobs" area on this question's page). In that column, I need to add some controls that will allow the user to enter a range of values. I want these controls to fill up the available space. They need to look something like this:
[textbox] - [textbox]
start finish
In an attempt to create this, I have the following:
<div class="row">
<div class="col-xs-5">
<input type="text" class="form-control" />
</div>
<div class="col-xs-1">
-
</div>
<div class="col-xs-5">
<input tpe="text" class="form-control" />
</div>
</div>
This creates an ugly looking page. The reason its ugly is because the control doesn't fill the whole width (because only 11 of the 12 available columns are used). In addition, too much space is given to the column with the dash. For those reasons, I then tried the following:
<ul class="list-inline">
<li><input type="text" class="form-control" /></li>
<li>-</li>
<li><input type="text" class="form-control" /></li>
</ul>
This approach took up the available width. However, my textboxes are stacked on top of each other now. Is there a way to accomplish what I'm trying to do with CSS? If so, how?
Thank you!
Try the following code i hope it will solve the issue,
<div class="input-group">
<input class="form-control" type="text" placeholder="Start">
<div class="input-group-addon">-</div>
<input class="form-control" type="text" placeholder="Finish">
</div>
I have a search form i made for a wordpress site.....visually it is good but still not functional.....please let me know what im missing here.
<body>
<form id="start" action="/">
<h1>Search our site</h1>
<p>
<label for="name">Entry</label>
<input type="text" id="name" size="35" />
</p>
<p> </p>
</p-->
<p>
<label>
<input type="checkbox" name="posts" id="posts" />
posts</label>
<label>
<input type="checkbox" name="pages" id="pages" />
pages</label>
<a class="submit" href="#">Submit</a></p>
</form>
<p id="credits"> </p>
</body>
You need to provide a way to submit the form.
<a class="submit" href="#" onclick="document.getElementById('start').submit()">Submit</a>
Based on the comments, we now know what you are trying to do. Your original question was not very specific.
In addition to the missing submit button, you also need to make sure you pass the correct variables in your form to the Wordpress search function. In your example:
<label for="name">Entry</label>
<input type="text" id="name" size="35" />
This code will handle the user input for the search term, I assume. The second line, the input element, needs a name like so:
<label for="name">Entry</label>
<input type="text" id="name" size="35" name="s" />
When this is submitted you will see the s=foo in the URL and that will tell Wordpress that it is doing a search.
I found this out by looking at the source code for a default wordpress search form. I'm not sure what the variables are needed for the other aspects of the form, "posts" and "pages", but you can examine a standard wordpress search form (maybe advanced search?) and then name your form elements appropriately.
Good luck!