تگ form در HTML
تگ form در HTML | تگ input در html | تگ فرم در html | ساخت دکمه در html | آموزش ساخت فرم ثبت نام با html | ساخت فرم تماس با ما html | آموزش HTML5
آرشیو برنامه نویسی صفر تا صد html آموزش css آموزش JavaScript آموزش Bootstrap
تگ form در HTML
توی این آموزش میخواهیم طریقه قرار دادن عکس در html رو بتون آموزش بدیم .
لینک دادن به عکس رو بتون آموزش میدیم.
بهتون میگیم چجور اندازه تصویر رو تغییر بدیم.
و همچنین لینک دادن به نقاط مختلف عکس رو بتون آموزش میدیم.
با دتام همراه باشید.
آموزش html
تگ input در html
مهمترین عنصر form، عنصر <input> است.
عنصر <input> می تواند به روش های مختلف نمایش داده شود، بسته به نوع ویژگی.
<!DOCTYPE html>
<html>
<body><h2>The input Element</h2>
<form action=”/action_page.php”>
Enter your name:
<input name=”firstname” type=”text”>
<br><br>
<input type=”submit”>
</form></body>
</html>
تگ form در HTML
اگر نوع ویژگی حذف شود، فیلد ورودی نوع پیش فرض را می گیرد: “text”
آموزش html
<select> عنصر
عنصر <select> یک لیست کشویی را تعریف می کند:
<!DOCTYPE html>
<html>
<body><h2>The select Element</h2>
<p>The select element defines a drop-down list:</p><form action=”/action_page.php”>
<select name=”cars”>
<option value=”volvo”>Volvo</option>
<option value=”saab”>Saab</option>
<option value=”fiat”>Fiat</option>
<option value=”audi”>Audi</option>
</select>
<br><br>
<input type=”submit”>
</form></body>
</html>
تگ form در HTML
همونجور که مشاهده میکنید در لیست کشویی گزینه پیش فرض اولین گزینه میباشد ( volvo )
حالا اگ بخوایین گزینه مورد نظرتون پیشفرض قرار بگیره از <selected> استفاده کنید :
<!DOCTYPE html>
<html>
<body><h2>Pre-selected Option</h2>
<p>You can preselect an option with the selected attribute.</p><form action=”/action_page.php”>
<select name=”cars”>
<option value=”volvo”>Volvo</option>
<option value=”saab”>Saab</option>
<option value=”fiat” selected>Fiat</option>
<option value=”audi”>Audi</option>
</select>
<br><br>
<input type=”submit”>
</form></body>
</html>
تگ selected
یکی دیگ از خصوصیات select به صورت زیر است :
<!DOCTYPE html>
<html>
<body><h2>Visible Option Values</h2>
<p>Use the size attribute to specify the number of visible values.</p><form action=”/action_page.php”>
<select name=”cars” size=”2″>
<option value=”volvo”>Volvo</option>
<option value=”saab”>Saab</option>
<option value=”fiat”>Fiat</option>
<option value=”audi”>Audi</option>
</select>
<br><br>
<input type=”submit”>
</form></body>
</html>
tag select
حالا ممکنه کاربر غیر از اون چهار مقداری رو که گذاشتیم رو بخواد انتخاب کنه
پس باید به کاربر حق انتخاب بدیم با multiple :
<!DOCTYPE html>
<html>
<body><h2>Allow Multiple Seletcions</h2>
<p>Use the multiple attribute to allow the user to select more than one value.</p><form action=”/action_page.php”>
<select name=”cars” size=”4″ multiple>
<option value=”volvo”>Volvo</option>
<option value=”saab”>Saab</option>
<option value=”fiat”>Fiat</option>
<option value=”audi”>Audi</option>
</select>
<br><br>
<input type=”submit”>
</form><p>Hold down the Ctrl (windows) / Command (Mac) button to select multiple options.</p>
</body>
</html>
تگ form در HTML
آموزش html
<textarea> عنصر
عنصر <textarea> یک فیلد ورودی متن را تعریف می کند:
<!DOCTYPE html>
<html>
<body><h2>Textarea</h2>
<p>The textarea element defines a multi-line input field.</p><form action=”/action_page.php”>
<textarea name=”message” rows=”10″ cols=”30″>The cat was playing in the garden.</textarea>
<br>
<input type=”submit”>
</form></body>
</html>
تگ textarea در html
در کد بالا rows ارتفاع ( تعداد خطوط ) کادر را مشخص میکند و cols عرض کادر را مشخص میکند .
ما میتونیم با css هم کادر متن درست کنیم :
<!DOCTYPE html>
<html>
<body><h2>Styling Textarea</h2>
<p>Use CSS to change the size of the textarea:</p><form action=”/action_page.php”>
<textarea name=”message” style=”width:200px; height:200px;”>The cat was playing in the garden.</textarea>
<br>
<input type=”submit”>
</form></body>
</html>
عنصر textarea در css
آموزش html
عنصر <button> در html
عنصر <button> یک دکمه قابل کلیک را تعریف می کند:
<!DOCTYPE html>
<html>
<body><h2>The button Element</h2>
<button type=”button” onclick=”alert(‘detam.ir’)”>Click Me!</button>
</body>
</html>
ساخت دکمه در html با عنصر button
آموزش html5
عنصر های فرم در html5
HTML5 عناصر فرم زیر را اضافه کرد:
<datalist>
<output>
توجه: مرورگرها عناصر ناشناخته را نمایش نمی دهند. عناصر جدید که در مرورگرهای قدیمی پشتیبانی نمی شوند.
آموزش html5
عنصر <datalist> در html5
عنصر <datalist> یک لیست از گزینه های از پیش تعریف شده برای یک عنصر <input> را مشخص می کند.
کاربران یک لیست کشویی از گزینه های از پیش تعیین شده را به عنوان داده های ورودی را مشاهده کنید.
خصیصه لیست عنصر <input> باید به id عنصر <datalist> اشاره کند.
<!DOCTYPE html>
<html>
<body><h2>The datalist Element</h2>
<p>The datalist element specifies a list of pre-defined options for an input element.</p><form action=”/action_page.php”>
<input list=”browsers” name=”browser”>
<datalist id=”browsers”>
<option value=”Internet Explorer”>
<option value=”Firefox”>
<option value=”Chrome”>
<option value=”Opera”>
<option value=”Safari”>
</datalist>
<input type=”submit”>
</form><p><b>Note:</b> The datalist tag is not supported in Safari or IE9 (and earlier).</p>
</body>
</html>
آموزش html5
عنصر <output> در html5
عنصر <output> نتیجه یک محاسبه ست :
<!DOCTYPE html>
<html>
<body><h2>The output Element</h2>
<p>The output element represents the result of a calculation.</p><form action=”/action_page.php”
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″>
=
<output name=”x” for=”a b”></output>
<br><br>
<input type=”submit”>
</form><p><strong>Note:</strong> The output element is not supported in Edge 12 or Internet Explorer and earlier versions.</p>
</body>
</html>
عنصر output در html
منبع : www.w3schools.com
ترجمه توسط دتام
