farsi/form.html at main · M-Hatami/farsi · 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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
<!DOCTYPE html>
<html dir="rtl" lang="fa">

<head>
    <link href="common.css" type="text/css" rel="stylesheet">
    <link href="img/ui/favicon.ico" type="image/x-icon" rel="icon">
    <style>
        /* Constraint Validation CSS Pseudo Selectors */

        input,
        input:after,
        input:before {
            /* border: 1px solid #ccc; */
            border-radius: 0.2 rem;
            transition: border linear 0.2s, box-shadow linear 0.2s;
            line-height: 1.4286;
            font-size: 1rem;
            color: rgb(32, 33, 36);
        }

        input:hover::placeholder,
        input:focus::placeholder {
            color: transparent;
        }

        input[type="text"]:enabled,
        input[type="email"],
        input[type="number"],
        textarea,
        fieldset {
            border: 1px solid rgb(38, 41, 216);
            box-sizing: border-box;
        }


        input:focus:valid {
            border-color: green;
            box-shadow: inset 0 0.2rem 2rem #fff, 0 0 0.2rem green;
        }

        input:focus:invalid:required,
        input:focus:out-of-range:required {
            border-color: red;
            box-shadow: inset 0 0.2rem 2rem #fff, 0 0 0.5rem red;
        }

        input:focus {
            border-color: #8ccdff;
            box-shadow: -0.5 0.5rem 0.2rem #fff inset, 0 0 0.5rem #8ccdff;
            outline: 0;
        }

        /* -- End of Constraint Validation CSS Pseudo Selectors */
        /* ----- Password Strength Meter ----*/


        /* ----- End of Password Strength Meter ----*/
    </style>


</head>

<body>

    <h2 id='formRequiredValidation'>راستی آزمایی گزینه های واجب و الزامی برگه اطلاعات بوسیله
        مرورگر </h2>

    <form action="/action_page.php" id="signUpForm" method="post">
        <label for="title">عنوان</label><br>
        <input type="text" id="title" autocomplete="honorific-prefix" title="غیرفعال گردید" name="title" value="حکیم"
            disabled /><br>
        <label for="fname">نام</label><br>
        <input type="text" name="fname" id="firstName" autocomplete="given-name" title="فقط حروف فارسی، گزینه واجب"
            maxlength="25" pattern="^[؀-ۿ]+$" required /><span></span><br>
        <label for="lname">نام خانوادگی</label><br>
        <input type="text" name="lname" id="lastName" autocomplete="family-name" title="فقط حروف فارسی، گزینه واجب"
            maxlength="25" pattern="^[؀-ۿ]+$" required /><span></span><br>
        <label for="mobile">شماره همراه</label><br>
        <input dir="ltr" type="tel" name="mobile" id="mobile" autocomplete="mobile"
            title=" شماره همراه، شما میتوانید پیش‌شماره کشور را قبل از آن بیافزایید" min="11" max="20"
            placeholder="۰۰۹۸۹۱۲۳۴۵۶۷۸۹" required /><span></span><br>
        <label for="email">رایانامه</label><br>
        <input dir="auto" type="email" name="email" id="email" autocomplete="email"
            title="!رایانامه‌ای به این نشانی برای تایید ارسال میگردد" placeholder="Hossein.Mohammadi@mihanmail.ir"
            size="45" required /><span></span><br>
        <label for="pwd">کلمه یا عبارت رمز</label><br>
        <input type="password" id="pwd" dir="auto" name="pwd" pattern=".{8,}" autocomplete="new-password"
            title="حداقل تعداد ۸ نویسه یا بیشتر، بهتر است از عبارت رمز بجای کلمه رمز استفاده کنید"><span></span><span
            data-tooltip="برای رمزی قوی، سعی کنید از ترکیبی از حروف فارسی، اعداد، فاصله، نشانه‌های ویژه مانند (×!@#\$%\^&\*_\+=-\|\\:)\ و قلابها («»/[]/{}) بهره ببرید. همچنین از عبارت و جمله رمز به یادماندنی بجای کلمه رمز استفاده کنید."
            data - tooltip - position="left" style="margin-right: 1em;" class="circle"><svg id="Layer_1"
                data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 20 20">
                <defs>
                    <style>
                        .cls-1 {
                            fill: none;
                        }

                        .cls-2 {
                            fill: #5f6368;
                        }
                    </style>
                </defs>
                <path class="cls-1" d="M0,0H20V20H0Z" />
                <path class="cls-2"
                    d="M10.83,5.83H9.17v5h1.66ZM10,18.33A8.33,8.33,0,1,0,1.67,10,8.33,8.33,0,0,0,10,18.33Zm0-15A6.67,6.67,0,1,1,3.33,10,6.68,6.68,0,0,1,10,3.33Zm.83,9.17H9.17v1.67h1.66Z" />
            </svg></span><br>
        <progress id="strength" value="0" max="5"></progress><br>
        <label for="pwd">تایید کلمه یا عبارت رمز</label><br>
        <input type="confirm"><br>
        <br>
        <input type="submit" value="ثبت">

    </form>
    <p>اطلاع رسانی فارسی</p>

    <hr>
    <style>
        .button {
            display: inline-block;
            border-radius: 4px;
            background-color: #f4511e;
            border: none;
            text-align: center;
            font-size: 16px;
            padding: 0 20px;
            width: 113px;
            transition: all 0.5s;
            cursor: pointer;
            margin: 5px;
        }

        .button span {
            color: #FFFFFF;
            cursor: pointer;
            display: inline-block;
            position: relative;
            transition: 0.5s;
        }

        .button span:after {
            font-family: Verdana, Geneva, Tahoma, sans-serif;
            content: '\00bb';
            position: absolute;
            opacity: 0;
            top: 25%;
            left: -20px;
            transition: 0.5s;
        }

        .button:hover span {
            padding-left: 25px;
        }

        .button:hover span:after {
            opacity: 1;
            left: 0;
        }

        /*    body {
            font: 1em sans-serif;
            width: 200px;
            padding: 0;
            margin: 0 auto;
        }

        p * {
            display: block;


        input[type=email] {
            -webkit-appearance: none;
            appearance: none;

            width: 100%;
            border: 1px solid #333;
            margin: 0;

            font-family: inherit;
            font-size: 90%;

            box-sizing: border-box;
        }
*/
        /* This is our style for the invalid fields */
        input:invalid {
            border-color: #900;
            background-color: #FDD;
        }

        input:focus:invalid {
            outline: none;
        }

        /* This is the style of our error messages */
        .error {
            width: 100%;
            padding: 0;

            font-size: 80%;
            color: white;
            background-color: #900;
            border-radius: 0 0 5px 5px;

            box-sizing: border-box;
        }

        .error.active::before {
            content: '\26A0 ';
            padding: 0 0 0 5px;
        }

        .error.active {
            padding: 0.3em;
        }
    </style>
    <h2>شخصی سازی پیامهای
        خطای راستی آزمایی پیش فرض <bdi><code>HTML</code> Constraint Validation API</bdi>و همچنین گروه بندی کردن عناصر
        برگه با
        <bdi><code>&lt;fieldset&gt;</code></bdi>
        و
        <bdi><code>&lt;legend&gt;</code></bdi>
    </h2><br>
    <div style="margin: 0 auto; display: flex;">


        <form action="">
            <fieldset>
                <legend>اطلاعات تماس</legend>
                <label>رایانامه:<br />
                    <input type="email" name="email" id="rayaNameh" minlength="8" required>
                    <span class="error" aria-live="polite"></span>
                </label><br />
                <label>شماره همراه:<br />
                    <input type="text" name="mobile" />
                </label><br />
                <label>شماره ثابت:<br />
                    <input type="text" name="telephone" />
                </label><br>
            </fieldset>

            <button class="button" style="vertical-align:middle"><span>ارسال</span></button>
            </span>
        </form>
        <hr>
        <script>
            // There are many ways to pick a DOM node; here we get the form itself and the email
            // input box, as well as the span element into which we will place the error message.
            const form = document.getElementsByTagName('form')[1];
            const email = document.getElementById('rayaNameh');
            const emailError = document.querySelector('#rayaNameh + span.error');

            email.addEventListener('input', function (event) {
                // Each time the user types something, we check if the
                // form fields are valid.

                if (email.validity.valid) {
                    // In case there is an error message visible, if the field
                    // is valid, we remove the error message.
                    emailError.textContent = ''; // Reset the content of the message
                    emailError.className = 'error'; // Reset the visual state of the message
                } else {
                    // If there is still an error, show the correct error
                    showError();
                }
            });

            form.addEventListener('submit', function (event) {
                // if the email field is valid, we let the form submit

                if (!email.validity.valid) {
                    // If it isn't, we display an appropriate error message
                    showError();
                    // Then we prevent the form from being sent by canceling the event
                    event.preventDefault();
                }
            });

            function showError() {
                if (email.validity.valueMissing) {
                    // If the field is empty,
                    // display the following error message.
                    emailError.textContent = 'نشانی رایانامه الزامی است.';
                } else if (email.validity.typeMismatch) {
                    // If the field doesn't contain an email address,
                    // display the following error message.
                    emailError.textContent = 'شما نیاز دارید یک نشانی صحیح رایانامه وارد کنید. ';
                } else if (email.validity.tooShort) {
                    // If the data is too short,
                    // display the following error message.
                    emailError.textContent = `نشانی رایانامه حداقل به ${email.minLength} نویسه نیاز دارد; شما تنها ${email.value.length} نویسه وارد کردید.`;
                }

                // Set the styling appropriately
                emailError.className = 'error active';
            }
        </script>

        <form action="http://www.example.com/review.php" method="get">
            <fieldset>
                <legend>
                    اطلاعات شما:
                </legend>
                <label>
                    نام شما:
                    <input type="text" name="name" size="30" maxlength="100">
                </label>
                <br />
                <label>
                    رایانامه:
                    <input type="email" name="email" size="30" maxlength="100" required>
                </label>
                <br />
            </fieldset>
            <br />
            <fieldset>
                <legend>
                    نظر شما:
                </legend>
                <p>
                    <label for="hear-about">
                        از چه طریقی ما را یافتید؟
                    </label>
                    <select name="referrer" id="hear-about">
                        <option value="جستجوگر">جستجوگر</option>
                        <option value="دوستان">دوستان</option>
                        <option value="تبلیغات">تبلیغات</option>
                        <option value="دیگر">دیگر</option>
                    </select>
                </p>
                <p>
                    آیا هنوز مایلید از این سامانه بازدید کنید؟
                    <br />
                    <label>
                        <input type="radio" name="rating" value="yes" />
                        بله
                    </label>
                    <label>
                        <input type="radio" name="rating" value="no" />
                        خیر
                    </label>
                    <label>
                        <input type="radio" name="rating" value="maybe" />
                        شاید
                    </label>
                </p>
                <p>
                    <label for="comments">
                        نظر:
                    </label>
                    <br />
                    <textarea rows="4" cols="40" id="comments">
</textarea>
                </p>
                <label>
                    <input type="checkbox" name="subscribe" checked="checked" />
                    برای دریافت بروز رسانیها ثبت نامم کن
                </label>
                <br />
                <input type="submit" value="ثبت نظر" />
            </fieldset>
        </form>
    </div>

    <script src="scripts/form.js"></script>
    <script src="scripts/toFarsiNumber.js"></script>
</body>

</html>