I am a beginner with programming. I have created an HTML page with a text box, text area, select box, checkboxes, and radio buttons. I am trying to show how VBScript works with HTML for a class assignment. One of the tasks is to have a series of editing rules. The one I need help with is making sure that at least one checkbox is checked before the user can submit the form. How would I do this in VBScript?
Here is my code so far:
<html>
<head>
<script language="vbscript">
<!--
sub fred
end sub
-->
</script>
</head>
<body>
<p>
<form name="f1">
<br>
Name <input type="text" name="nametext" size="30"><p>
List your favorite things to do <P><textarea name="bigtext" rows="5" cols="40">default value</textarea>
<p>What is your favorite animal to see at the zoo?
<select name="zooanimal">
<option>default value
<option>elephants
<option>giraffes
<option>tigers
<option>seals
</select>
<p>
What is your favorite color?<br><p>
blue <input name="rb" type="radio" value="bluechecked" checked> green <input name="rb" type="radio" value="greenchecked">
pink <input name="rb" type="radio" value="pinkchecked"> yellow <input name="rb" type="radio" value="yellowchecked"> red <input name="rb" type="radio" value="redchecked"> black <input name="rb" type="radio" value="blackchecked"></p>
Which of these games do you play?<br><p>
Starcraft <input name="game" value="Starcraft" type="checkbox"> World of Warcraft <input name="game" value="WorldofWarcraft" type="checkbox">
League of Legends <input name="game" value="LeagueofLegends" type="checkbox"> none <input name="game" value="none"
type="checkbox"><P>
<p><input type="button" value="EDIT AND REPORT" onClick="fred">
<p>
<p>
</form>
</body>
</html>
If (f1.rb.checked = True) Or (f1.game.checked = True) Then
Related
Ive redone some of the code and tried this, but my print function doesn't work. If it got working would this only print the div id example?
<div id='example'>
<h3>Saturday Sept. 8th</h3>
</p><strong>7:00AM-8:00AM</strong> </p>
<input type="radio" name= "one" /><label> meditation meeting</label>
<br>
<input type="radio" name= "one" <label> step 1 workshop</label>
<br>
<input type="radio" name= "one"<label > Bottom lines</label>
<br>
<input type="radio" name= "one"<label > Top Lines</label>
<br>
<input type="radio" name= "one"<label> Sponsorship</label>
<br>
<input type="radio" name= "one"<label> Being a Sponsee</label>
<br>
<br>
</p> <strong>8:15AM-9:15AM</strong></p>
<input type="radio" name= "two"<label> Step 2 workshop</label>
<br>
<input type="radio" name= "two"<label>Living life</label>
<br>
<input type="radio" name= "two"<label> chairing a meeting</label>
<br>
<input type="radio" name= "two"<label>Service work</label>
<br>
<input type="radio" name= "two"<label> Accepting gifts</label>
<br>
<input type="radio" name= "two"<label>Principles before Personalities</label>
<br>
<input type="button" value="Print" onclick="printPage('example');"></input>
</div>
You can't control printing in the web browser because that's a user-end functionality, so a workaround/hackie way is required, what I usually do is the following:
You can make a di that will appear in the middle of the screen covering everything behind it using the z-index property
And then fill it with desired content to be printed
And then Right-click==>Print
And then on the printing dialog you can resize the printed content as needed.
When in a form I have several radio inputs that make a single control (example below), what's the most semantic way to group them together?
<form>
<!-- Single radio control made of 3 radio inputs -->
<input type="radio" name="X" value="A" />
<input type="radio" name="X" value="B" />
<input type="radio" name="X" value="C" />
<!-- Some other control -->
<input type="text" name="Y" value="D" />
</form>
I know I can enclose them in a paragraph (<p>..</p>), but I wonder if maybe list (<ul>..</ul>) would be more semantic approach?
You can group together by using fieldset
.radio_button{
list-style-type: none;
}
<form>
<h1>Testing Form Radio buttons</h1>
<fieldset>
<legend>Title</legend>
<ul>
<li class="radio_button">
<label for="title_1">
<input type="radio" id="title_1" name="title" value="M." />
Mister
</label>
</li>
<li class="radio_button">
<label for="title_2">
<input type="radio" id="title_2" name="title" value="Ms." />
Miss
</label>
</li>
</ul>
</fieldset>
</section>
</form>
Try this:
<form>
<!-- Single radio control made of 3 radio inputs -->
<ul>
<li>
<input type="radio" name="X" value="A" />A
</li>
<li>
<input type="radio" name="X" value="B" />B
</li>
<li>
<input type="radio" name="X" value="C" />C
</li>
</ul>
<input type="text" name="Y" value="D" />
</form>
A good way would be using the bootstrap lib and format your forms with bootstrap
: Bootstrap form inputs
You can use the name field same if you want to get only 1 value selected,
And only selected field's value (value = "A") will be submitted.
You can group them using css styles. W3.css is a nice library like bootstrap.
W3.css examples
I'm trying to figure out how to mark up some code using WCAG standards, but it's a little complicated when I run into this situation:
<div class="form-group">
<label>Entry Method</label>
<div>
<label>
<input type="radio" /> Upload file
</label>
<label>
<input type="radio" /> Enter Manually
</label>
<label>
<input type="radio" /> Load Template
</label>
</div>
</div>
What do I do with the first "label"? How do I use "for" and "id" in this scenario?
A label accompanies a single form field, rather than a group of fields. Grouping form fields is achieved using a fieldset instead of a div, which is accompanied by a legend instead of a label:
<fieldset class="form-group">
<legend>Entry Method</legend>
<div>
<label>
<input type="radio" /> Upload file
</label>
<label>
<input type="radio" /> Enter Manually
</label>
<label>
<input type="radio" /> Load Template
</label>
</div>
</fieldset>
See H71 of WCAG 2.0 for a detailed write-up.
I would like to implement something similar to a google search with radio buttons. Depending on the radio button selected, would change the type of search (search,images,video, etc).
Right now I have:
<div id ="searchtext">
<form method="get" id ="searchbox" action="http://www.google.com/search"/>
<input type="text" name="q" size="30" class="searchtext" maxlength="255" value="" />
<input type="image" value="Search" class="searchbutton" src="images/searchbar/searchbutton.png"/>
<br/>
</div>
<div id="radiosearch">
<input type="radio" name="radiosearch" onclick="document.searchbox.action='http://www.google.com/search?q=';" checked="checked"/> Web
<input type="radio" name="radiosearch" onclick="document.searchbox.action='http://images.google.com/images?q=';"/>Images
<input type="radio" name="radiosearch" onclick="document.searchbox.action='http://maps.google.com/maps?hl=en&tab=wl?q=';"/>Maps
<input type="radio" name="radiosearch" onclick="document.searchbox.action='http://www.youtube.com/results?q=';"/>Youtube
<span class = "class1">
Change Theme
</span>
</div>
However, clicking on the radio boxes is not changing the form action. Any Ideas?
Try
<input type="radio" name="radiosearch" onclick="document.getElementById('searchbox').action='http://www.google.com/search?q=';" checked="checked"/> Web
<input type="radio" name="radiosearch" onclick="document.getElementById('searchbox').action='http://images.google.com/images?q=';"/>Images
<input type="radio" name="radiosearch" onclick="document.getElementById('searchbox').action='http://maps.google.com/maps?hl=en&tab=wl?q=';"/>Maps
<input type="radio" name="radiosearch" onclick="document.getElementById('searchbox').action='http://www.youtube.com/results?q=';"/>Youtube
How would i place a long list of checkbox options around a scrolling windows so that it does not take up large amounts of the page in my php webpage?
thanks.
Something like this should work.
HTML:
<div class="scrollbox">
<input type="checkbox" />
...
</div>
CSS:
.scrollbox {
height:200px;
overflow-x:scroll;
}
<div style="overflow:scroll; height: 400px">
<!-- put your content here -->
</div>
Havent tested it, it should be AROUND those lines. Done that before for a UI framework of mine, had a checkbox list and radiolist UI control and used that technique...
<html>
<head>
<title>Scrolling Checkboxes</title>
<script type="text/javascript">
</script>
</head>
<body>
<div id="ScrollCB" style="height:150;width:200px;overflow:auto">
<input type="checkbox" id="scb1" name="scb1" value="1">As Seen On Tv<br>
<input type="checkbox" id="scb2" name="scb2" value="2">Back To Basics<<br>
<input type="checkbox" id="scb3" name="scb3" value="3">Bed Bath & Beyond<br>
<input type="checkbox" id="scb4" name="scb4" value="4">Black and Decker<br>
<input type="checkbox" id="scb5" name="scb5" value="5">Borch<br>
<input type="checkbox" id="scb6" name="scb6" value="6">Culsinart<br>
<input type="checkbox" id="scb7" name="scb7" value="7">Dualit Lite<br>
<input type="checkbox" id="scb8" name="scb8" value="8">"Easton<br>
<input type="checkbox" id="scb9" name="scb9" value="9">Euro Cuisine<br>
<input type="checkbox" id="scb10" name="scb10" value="10">Euro-Pro<br>
<input type="checkbox" id="scb11" name="scb11" value="11">Farberware<br>
<input type="checkbox" id="scb12" name="scb12" value="12">Gator<br>
<input type="checkbox" id="scb13" name="scb13" value="13">Hamilton Beach<br>
<input type="checkbox" id="scb14" name="scb14" value="14">Hansgrohe<br>
<input type="checkbox" id="scb15" name="scb15" value="15">International Playthings<br>
<input type="checkbox" id="scb16" name="scb16" value="16">Kitchen Aid<br>
</div>
</body>
</html>