Question

In: Computer Science

Create a Submission page form (make sure that you include an action and a method) that...

Create a Submission page form (make sure that you include an action and a method) that should employ client-side validation (includes CSS color-coding for inaccurate values) and should use Bootstrap’s Horizontal form layout (Links to an external site.) (Links to an external site.) with the following fields:

A. Fieldset with the legend “Your Information”

1. First Name (max size: 50; required; text)

2. Last Name (max size: 50; required; text)

3. Email (max size: 50; required; email)

4. Phone (max size: 50; tel; use regular expression for validation)

5.Class (values: Freshman, Sophomore, Junior, Senior; required; radio buttons)

6. Major (max size: 40; required; text that uses a datalist with the following suggested values: English, Art, Graphic Design, Digital Media, Photography)

B. Fieldset with the legend “Submission Details”

1. Submission Type: (values: Poetry, Prose, Art, Photography, Other; drop-down with size of 5 and multiple selection)

2. Description (required; textarea)

3. Upload file (if needed) (file)

4. I affirm that I am the creator of this submission (required; checkbox before text)

5. Digital signature (max size: 50; required; text)

C. Submit to The Torch (submit)

Solutions

Expert Solution

here i am uploading th coding part.

*********************** index.html **************************

<!DOCTYPE html>

<html>

<head>

    <title>Form Submittion</title>

    <meta name="viewport" content="width = device-width, initial-scale = 1">

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">

    <link rel="stylesheet" href="style.css">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>

</head>

<body>

    <form action="submittion.php" method="POST">

        <legend>

            <h1> Your Information</h1>

        </legend>

        <div class="form-group row">

            <label for="inputfirstname" class="col-sm-2 col-form-label">First Name</label>

            <div class="col-sm-5">

                <input type="text" class="form-control" id="inputfirstname" placeholder="First Name" maxlength="50" required>

            </div>

        </div>

        <div class="form-group row">

            <label for="inputlastname" class="col-sm-2 col-form-label">Last Name</label>

            <div class="col-sm-5">

                <input type="text" class="form-control" id="inputlastname" placeholder="Last Name" maxlength="50" required>

            </div>

        </div>

        <div class="form-group row">

            <label for="inputEmail" class="col-sm-2 col-form-label">Email</label>

            <div class="col-sm-5">

                <input type="email" class="form-control" id="inputEmail" placeholder="Email" maxlength="50" required>

            </div>

        </div>

        <div class="form-group row">

            <label for="inputPhone" class="col-sm-2 col-form-label">Phone</label>

            <div class="col-sm-5">

                <input type="number" class="form-control" id="inputPhone" placeholder="Phone" maxlength="50" required>

            </div>

        </div>

        <fieldset class="form-group">

            <div class="row">

                <legend class="col-form-label col-sm-2 pt-0">Class</legend>

                <div class="col-sm-10">

                    <div class="form-check">

                        <input class="form-check-input" type="radio" name="class" id="Freshman_id" value="Freshman"

                            checked>

                        <label class="form-check-label" for="Freshman_id">

                            Freshman

                        </label>

                    </div>

                    <div class="form-check">

                        <input class="form-check-input" type="radio" name="class" id="Sophomore_id" value="Sophomore">

                        <label class="form-check-label" for="Sophomore_id">

                            Sophomore

                        </label>

                    </div>

                    <div class="form-check">

                        <input class="form-check-input" type="radio" name="class" id="Junior_id" value="Junior">

                        <label class="form-check-label" for="Junior_id">

                            Junior

                        </label>

                    </div>

                    <div class="form-check">

                        <input class="form-check-input" type="radio" name="class" id="Senior_id" value="Senior">

                        <label class="form-check-label" for="Senior_id">

                            Senior

                        </label>

                    </div>

                </div>

            </div>

        </fieldset>

        <div class="form-group row">

            <label for="major_id" class="col-sm-2 col-form-label">Major</label>

            <div class="col-sm-5">

                <input class="form-control" list="datalistOptions" id="major_id" placeholder="Type to search..."

                    maxlength="50" required>

                <datalist id="datalistOptions">

                    <option value="English">

                    <option value="Art">

                    <option value="Graphic Design">

                    <option value="Digital Media">

                    <option value="Photography">

                </datalist>

            </div>

        </div>

        <legend>

            <h1>Submittion Details</h1>

        </legend>

        <div class="form-group row">

            <label for="SubmittionType_id" class="col-sm-2 col-form-label">Submittion Type:</label>

            <div class="col-sm-5">

                <select class="form-control" id="SubmittionType_id">

                    <option>Poetry</option>

                    <option>Prose</option>

                    <option>Art</option>

                    <option>Photography</option>

                    <option>Other</option>

                </select>

            </div>

        </div>

        <div class="form-group row">

            <label for="description_id" class="col-sm-2 col-form-label">Description</label>

            <div class="col-sm-5">

                <textarea class="form-control" id="description_id" placeholder="Description" required></textarea>

            </div>

        </div>

        <div class="form-group row">

            <label for="upload_id" class="col-sm-2 col-form-label">Upload file</label>

            <div class="col-sm-5">

                <div class="custom-file mb-3">

                    <input type="file" class="custom-file-input" id="customFile" name="filename">

                    <label class="custom-file-label" for="customFile">Choose file</label>

                </div>

            </div>

        </div>

        <div class="form-group row">

            <div class="col-sm-5">

                <div class="form-check">

                    <input class="form-check-input" type="checkbox" id="affirm_id">

                    <label class="form-check-label" for="affirm_id">

                        I affirm that I am the creator of this submission

                    </label>

                </div>

            </div>

        </div>

        <div class="form-group row">

            <label for="Digitalsign" class="col-sm-2 col-form-label">Digital Signature</label>

            <div class="col-sm-5">

                <input type="text" class="form-control" id="Digitalsign" placeholder="Digital Signature" maxlength="50" required>

            </div>

        </div>

        <div class="form-group row">

            <div class="col-sm-5">

                <button type="submit" class="btn btn-primary">Submit to The Touch</button>

            </div>

        </div>

    </form>

</body>

</html>

*********************** end of code **********************************

now i am uloading two snippets here...

snippet 1:

snippet 2:

venereology answered 1 year ago
Next > < Previous

Related Solutions

Discuss the steps in generating an action potential in a neuron. (Make sure to include which...
Discuss the steps in generating an action potential in a neuron. (Make sure to include which ion channels are activated and how, changes in membrane potential as a result of the movement of those ions, the different phases seen in an action potential, and the movement of the action potential in relation to the anatomy of a neuron.).
describe the cross bridge cycle. Make sure to include the action of actin, myosin, troponin, calcium,...
describe the cross bridge cycle. Make sure to include the action of actin, myosin, troponin, calcium, and ATP.
Project 2 This assignment follows the standard form for a project submission. You need to include...
Project 2 This assignment follows the standard form for a project submission. You need to include an introduction, primary discussion, and summary. Include graphs, tables, and images, as necessary, to improve the clarity of your discussion. Your project needs to be both correct and well written. Communication remains a critical component of our modern, technological society. A few notes about format: you MUST use MS Word for your project and use Equation Editor for all mathematical symbols, e.g. z(t) =...
Project 2 This assignment follows the standard form for a project submission. You need to include...
Project 2 This assignment follows the standard form for a project submission. You need to include an introduction, primary discussion, and summary. Include graphs, tables, and images, as necessary, to improve the clarity of your discussion. Your project needs to be both correct and well written. Communication remains a critical component of our modern, technological society. A few notes about format: you MUST use MS Word for your project and use Equation Editor for all mathematical symbols, e.g. z(t) =...
Identify three products (include companies) for each costing method. Make sure to include your reasoning behind...
Identify three products (include companies) for each costing method. Make sure to include your reasoning behind costing methods.
Describe the ionic basis of an action potential and be sure to include the role of...
Describe the ionic basis of an action potential and be sure to include the role of channels/gates within the cell membrane and how this relates to a positive feedback homeostatic mechanism.
Describe in detail the action of insulin. Be sure to include a description of what it...
Describe in detail the action of insulin. Be sure to include a description of what it is (what kind of biomolecule/class of hormone), how its secretion is regulated, where specifically it is secreted from, its general effects on body cells, and finally each of its specific effects (if it has any) on: skeletal muscle, the liver, adipose tissue, and blood glucose levels.
Make sure to include comments that explain all your steps (starts with #) Make sure to...
Make sure to include comments that explain all your steps (starts with #) Make sure to include comments that explain all your steps (starts with #) Write a program that prompts the user for a string (a sentence, a word list, single words etc.), counts the number of times each word appears and outputs the total word count and unique word count in a sorted order from high to low. The program should: Display a message stating its goal Prompt...
to create an effective and efficient terrorist group profile, you must be sure to include the...
to create an effective and efficient terrorist group profile, you must be sure to include the following information: Aliases Bases of Operation Date Formed Strength/Number of members Organizational Structure Classification (i.e. Religious, Nationalist, etc.) Is there a leader? Provide a photo of the group leader Group Leader Demographics (i.e. DOB, Place of Birth, Citizenship Height, Weight, Eyes, Languages, etc.) Is there a reward for the capture of the group leader? If so, how much is the reward? Financial Sources Founding...
There is a pair of functions in stdlib.h (make sure to include it) that are used...
There is a pair of functions in stdlib.h (make sure to include it) that are used for generating pseudo-random numbers. These are "srand" and "rand". Examples are on pages 686 and 687. E.g., function "srand(3)" provides the seed value of 3 to the srand function. (3 is just a number, and probably isn't even a good number for this purpose, but that's a discussion for another time). The reason that we use a seed value is so that we can...
ADVERTISEMENT
Subjects
ADVERTISEMENT
Latest Questions
ADVERTISEMENT