فرم ها در HTML
فرمها در HTML برای جمعآوری دادهها از کاربران استفاده میشوند. فرمها میتوانند شامل ورودیهای مختلفی مانند متن، دکمهها، چکباکسها و لیستها باشند. ساختار اصلی یک فرم به این شکل است:
ساختار فرم:
- form: برای تعریف فرم.
- input: برای ایجاد فیلدهای ورودی مانند متن، پسورد، دکمهها و غیره.
- textarea: برای ورودیهای چند خطی.
- select و option: برای لیست کشویی.
- button: برای دکمهها.
- label: برای تعیین برچسبها و متنی که به ورودیها تعلق دارد.
- fieldset و legend: برای گروهبندی ورودیها در یک قسمت منطقی.
مثال ساده از فرم:
<form action="/submit" method="POST">
<label for="name">نام:</label>
<input type="text" id="name" name="name" required><br><br>
<label for="email">ایمیل:</label>
<input type="email" id="email" name="email" required><br><br>
<label for="message">پیام:</label>
<textarea id="message" name="message" rows="4" cols="50"></textarea><br><br>
<button type="submit">ارسال</button>
</form>
<label for="name">نام:</label>
<input type="text" id="name" name="name" required><br><br>
<label for="email">ایمیل:</label>
<input type="email" id="email" name="email" required><br><br>
<label for="message">پیام:</label>
<textarea id="message" name="message" rows="4" cols="50"></textarea><br><br>
<button type="submit">ارسال</button>
</form>
توضیحات:
- action: مسیر URL که دادهها به آن ارسال میشوند.
- method: روش ارسال دادهها (مانند GET یا POST).
- label: برای نمایش برچسبها برای ورودیها.
- input: برای ورودیهای مختلف (مانند متن، پسورد، ایمیل و غیره).
- textarea: برای ایجاد فیلدهای ورودی چندخطی.
- button: برای ارسال فرم.
انواع ورودیها:
-
ورودی متن (Text Input):
<input type="text" id="username" name="username"> -
ورودی پسورد (Password Input):
<input type="password" id="password" name="password"> -
ایمیل (Email Input):
<input type="email" id="email" name="email"> -
ورودی رادیویی (Radio Button):
<input type="radio" id="male" name="gender" value="male">
<label for="male">مرد</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">زن</label> -
چکباکس (Checkbox):
<input type="checkbox" id="subscribe" name="subscribe">
<label for="subscribe">عضویت در خبرنامه</label> -
لیست کشویی (Select List):
<select name="country" id="country">
<option value="iran">ایران</option>
<option value="usa">آمریکا</option>
<option value="uk">بریتانیا</option>
</select> -
دکمه (Button):
<button type="submit">ارسال</button>
گروهبندی ورودیها:
برای گروهبندی ورودیها میتوانید از تگهای fieldset و legend استفاده کنید.
<fieldset>
<legend>اطلاعات شخصی</legend>
<label for="name">نام:</label>
<input type="text" id="name" name="name"><br><br>
<label for="age">سن:</label>
<input type="number" id="age" name="age">
</fieldset>
<legend>اطلاعات شخصی</legend>
<label for="name">نام:</label>
<input type="text" id="name" name="name"><br><br>
<label for="age">سن:</label>
<input type="number" id="age" name="age">
</fieldset>
این تگها به شما کمک میکنند که فرمهایی با ورودیهای مختلف ایجاد کرده و دادهها را از کاربران جمعآوری کنید.
