صفت خصوصی form در HTML5

در این مقاله از سایت آموزی جهت استفاده شما همراهان گرامی به معرفی و کاربرد صفت خصوصی form در html5 ، می پردازیم. صفت خصوصی form در اچ تی ام ال در آخرین نسخه زبان HTML یعنی HTML5 معرفی شده است.

صفت form مخصوص تگ button ، تگ input ، تگ fieldset ، تگ label ، تگ meter ، تگ object ، تگ output ، تگ select و تگ textarea می باشد.

معرفی و کاربرد صفت خصوصی form در HTML

ویژگی خصوصی form ، مخصوص تگ button ، تگ input ، تگ fieldset ، تگ label ، تگ meter ، تگ object ، تگ output ، تگ select و تگ textarea می باشد.

خاصیت form ، یک ویژگی جدید در سند html است، که در آخرین نسخه آن یعنی HTML5 معرفی شد.

زمانی که از خصوصیت form درون تگ های مذکور استفاده شود، مقدارصفت تگ form با مقدار صفت id درون تگ مورد نظر برابر است.

در این صورت تگی که دارای خاصیت form برابر با مقدار خاصیت id در تگ form باشد، متعلق به آن فرم می شود. در این صورت اطلاعات آن تگ همراه با همان فرم html ارسال خواهد شد.

مثال در مورد ویژگی خصوصی form درون تگ button

<form action=”/action_page.php” method=”get” id=”form1″>
First name: <input type=”text” name=”fname”><br>
Last name: <input type=”text” name=”lname”><br>
</form>

<button type=”submit” form=”form1″ value=”Submit”>Submit</button>

در مثال بالا مقدار صفت id در تگ form مربوطه برابر با مقدار صفت form درون تگ button می باشد.

در این صورت علی رغم اینکه تگ button درون تگ form مربوطه نیامده ، با کلیک روی آن اطلاعات فرم مورد نظر را به سرور ارسال می کند.

مثال در مورد ویژگی خصوصی form درون تگ fieldset

<form action=”/action_page.php” method=”get” id=”form1″>
What is your favorite color? <input type=”text” name=”fav_color”><br>
<input type=”submit”>
</form>

<fieldset form=”form1″>
Name: <input type=”text” name=”username”><br>
Email: <input type=”text” name=”usermail”><br>
</fieldset>

در مثال بالا مقدار صفت id در تگ form مربوطه برابر با مقدار صفت form درون تگ fieldset می باشد.

در این صورت علی رغم اینکه تگ fieldset درون تگ form مربوطه نیامده ، اطلاعات تگ های input آن همراه با اطلاعات فرم مورد نظر به سرور ارسال می شود.

مثال در مورد ویژگی خصوصی form درون تگ input

<form action=”/action_page.php” id=”form1″>
First name: <input type=”text” name=”fname”><br>
<input type=”submit” value=”Submit”>
</form>

Last name: <input type=”text” name=”lname” form=”form1″>

در مثال بالا مقدار صفت id در تگ form مربوطه برابر با مقدار صفت form درون تگ input می باشد.

در این صورت علی رغم اینکه تگ input درون تگ form مربوطه نیامده ، اطلاعات تگ input همراه با اطلاعات فرم مورد نظر به سرور ارسال می شود.

مثال در مورد ویژگی خصوصی form درون عنصر label

<form action=”/action_page.php” id=”form1″>
<input type=”radio” name=”gender” id=”male” value=”male”><br>
<label for=”female”>Female</label>
<input type=”radio” name=”gender” id=”female” value=”female”><br>
<label for=”other”>Other</label>
<input type=”radio” name=”gender” id=”other” value=”other”><br><br>
<input type=”submit” value=”Submit”>
</form>

<label for=”male” form=”form1″>Male</label>

در مثال بالا مقدار صفت id در تگ form مربوطه برابر با مقدار صفت form درون تگ label می باشد.

در این صورت علی رغم اینکه تگ label درون تگ form مربوطه نیامده ، اطلاعات تگ label همراه با اطلاعات فرم مورد نظر به سرور ارسال می شود.

مثال در مورد ویژگی خصوصی form درون عنصر meter

<form action=”/action_page.php” method=”get” id=”form1″>
First name: <input type=”text” name=”fname”><br>
<input type=”submit” value=”Submit”>
</form>

<meter form=”form1″ name=”x1″ min=”0″ low=”40″ high=”90″ max=”100″ value=”95″></meter>

در مثال بالا مقدار صفت id در تگ form مربوطه برابر با مقدار صفت form درون تگ meter می باشد.

در این صورت علی رغم اینکه تگ meter درون تگ form مربوطه نیامده ، اطلاعات تگ meter همراه با اطلاعات فرم مورد نظر به سرور ارسال می شود.

مثال در مورد ویژگی خصوصی form درون تگ object

<form action=”/action_page.php” id=”form1″>
First name: <input type=”text” name=”fname”><br>
<input type=”submit” value=”Submit”>
</form>

<object data=”helloworld.swf” height=”400″ width=”400″ form=”form1″ name=”obj1″></object>

در مثال بالا مقدار صفت id در تگ form مربوطه برابر با مقدار صفت form درون تگ object می باشد.

در این صورت علی رغم اینکه تگ object درون تگ form مربوطه نیامده ، فایل رسانه ای تگ object هم همراه با اطلاعات فرم مورد نظر به سرور ارسال می شود.

مثال در مورد ویژگی خصوصی form درون عنصر output

<form action=”/action_page.php” id=”numform”
oninput=”x.value=parseInt(a.value)+parseInt(b.value)”>0
<input type=”range” id=”a” name=”a” value=”50″>100
+<input type=”number” id=”b” name=”b” value=”50″>
<br><br>
<input type=”submit”>
</form>

<output form=”numform” name=”x” for=”a b”></output>

در مثال بالا مقدار صفت id در تگ form مربوطه برابر با مقدار صفت form درون تگ output می باشد.

در این صورت علی رغم اینکه تگ output درون تگ form مربوطه نیامده ، نتیجه عملیات محاسبه در تگ output هم همراه با اطلاعات فرم مورد نظر به سرور ارسال می شود.

مثال در مورد ویژگی خصوصی form درون تگ select

<form action=”/action_page.php” id=”carform”>
Firstname:<input type=”text” name=”fname”>
<input type=”submit”>
</form>

<select name=”carlist” form=”carform”>
<option value=”volvo”>Volvo</option>
<option value=”saab”>Saab</option>
<option value=”opel”>Opel</option>
<option value=”audi”>Audi</option>
</select>

در مثال بالا مقدار صفت id در تگ form مربوطه برابر با مقدار صفت form درون تگ select می باشد.

در این صورت علی رغم اینکه تگ select درون تگ form مربوطه نیامده ، اطلاعات تگ select و تگ های option درون آن که لیست کشویی با قابلیت انتخاب را ساخته اند، هم همراه با اطلاعات فرم مورد نظر به سرور ارسال می شود.

مثال در مورد ویژگی خصوصی form درون عنصر textarea

<form action=”/action_page.php” id=”usrform”>
Name: <input type=”text” name=”usrname”>
<input type=”submit”>
</form>

<textarea name=”comment” form=”usrform”>Enter text here…</textarea>

در مثال بالا مقدار صفت id در تگ form مربوطه برابر با مقدار صفت form درون تگ textarea می باشد.

در این صورت علی رغم اینکه تگ textarea درون تگ form مربوطه نیامده ، اطلاعات تگ textarea و پیغام درون فیلد textarea هم همراه با اطلاعات فرم مورد نظر به سرور ارسال می شود.

برای متخصص شدن در طراحی سایت فروشگاهی با وردپرس روی لینک زیر کلیک کن و تو دوره ثبت نام کن:

برای متخصص شدن در طراحی بخش Front End سایت روی لینک زیر کلیک کن و تو دوره ثبت نام کن:

بررسی ویژگی عمومی form در سند html 4.0.1 و HTML5

ویژگی خصوصی form یک صفت جدید در HTML5 است. و در HTML4.01 و نسخه های قدیمی تر وجود ندارد.

پشتیبانی مرورگرهای اینترنتی از ویژگی form درون عنصر button ، عنصر input ، عنصر fieldset ، تگ label ، عنصر meter ، تگ object ، عنصر output ، عنصر select و عنصر textarea

تگ
button	10.0	عدم پشتیبانی	4.0	5.1	9.5
fieldset	عدم پشتیبانی	عدم پشتیبانی	عدم پشتیبانی	عدم پشتیبانی	عدم پشتیبانی
input	9.0	عدم پشتیبانی	4.0	5.1	10.6
label	بله	بله	بله	بله	بله
meter	عدم پشتیبانی	عدم پشتیبانی	عدم پشتیبانی	عدم پشتیبانی	عدم پشتیبانی
object	عدم پشتیبانی	عدم پشتیبانی	عدم پشتیبانی	عدم پشتیبانی	عدم پشتیبانی
output	بله	عدم پشتیبانی	بله	بله	بله
select	بله	عدم پشتیبانی	بله	بله	بله
textarea	بله	عدم پشتیبانی	بله	بله	بله

پیوندهای کاربردی

تگ های HTML در سایت آموزی

تگ های جدید HTML5 در سایت آموزی

صفات تگ های HTML در سایت آموزی

تگ های منسوخ شده HTML5 در سایت آموزی

تگ های block level و inline level در سایت آموزی

تگ های HTML در W3school

ویژگی های CSS در سایت آموزی

ویژگی های CSS در W3schools

صفت خصوصی form در HTML5 | صفت form درون تگ input – اختصاصی سایت آموزی