Bootstrap-practice/forms.html at master · beardev-in/Bootstrap-practice · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
        <form>
             <div class ="form-group">
                    <label for  ="name" class ="text-center">name</label>
                    <input type ="text" id ="name" class ="form-control form-control-lg w-25" placeholder ="etner name">
                </div>
                <div class ="form-group">
                    <label for ="email">email</label>
                    <input type ="email" id ="email" class ="form-control form-control-lg  w-25" placeholder ="enter email">
                    <span class ="text-muted form-text">email is secured</span>
                </div>
                <div class ="form-group">
                    <label for ="gender">gender</label>
                    <select id ="gender" class ="form-control form-control-lg w-25">
                        <option>male</option>
                        <option>female</option>
                    </select>
                </div>
                <div class ="form-group">
                    <label for ="bio">bio</label>
                    <textarea class ="form-control w-25" rows ="3" id ="bio">
                    </textarea>
                </div>
                <div class ="form-group">
                        <label for ="file">file input</label>
                        <input type ="file" id ="file" class ="form-control-file">
                        <small id ="fileHelp" class ="text-muted form-text">max 3mb</span>
                    </div>

                    <fieldset class ="form-group">
                        <legend>What are you using this service for?</legend>
                        <div class ="form-check">
                            <label class ="form-check-label">
                                <input type ="radio" value ="option1" class ="form-check-input">
                                food
                            </label>
                        </div>
                            <div class ="form-check">
                            <label class ="form-check-label">
                                <input type ="radio" class ="form-check-input" value ="option2" data-toggle ="form-check">
                                 cleaning
                            </label>
                            </div>
                            <div class ="form-check">
                            <label class ="form-check-label">
                                <input type ="radio" class ="form-check-input" value ="option2">
                                car wash
                            </label>
                        </div>
                    </fieldset>
            </form>


    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</body>
</html>