آموزش تگ input در HTML

تگ input یک کنترل ورودی فرم را در یک سند HTML نشان می دهد. کنترل ورودی فرم ، کنترلی است که به کاربر اجازه می دهد داده ها را وارد کند و با یک وب سایت یا برنامه ارتباط برقرار کند.

نحوه نوشتن تگ input

input به صورت input نوشته می شود (بدون برچسب پایان). به تگ input به طور معمول یک مشخصه type برای تعیین نوع کنترل و یک ویژگی نام داده می شود تا پردازنده فرم بتواند به آن اشاره کند. غالباً از مشخصه مقدار برای تعیین مقدار پیش فرض کنترل فرم استفاده می شود.

ویژگی های زیادی وجود دارد که می توانند با تگ input استفاده شوند. اینها در زیر “الگو” ذکر شده است.

در اینجا یک مثال ساده

از تگ input با برخی ویژگی ها آورده شده است:

<input type="text" name="fcolor" value="Blue">

در اینجا مثالی آورده شده است که شامل سه تگ input در یک فرم معمولی است:

<form action="#" method="get">
	<label>First Name: <input name="first_name"></label>
	<label>Last Name: <input name="last_name"></label>
	<inpu

مثال ها

یک فرم ساده

در اینجا فرمی وجود دارد که برای جمع آوری جزئیات نام کاربر استفاده می شود. از سه تگ input استفاده می شود:

دو مورد برای جزئیات نام ، یکی برای دکمه ارسال.

<form action="#" target="_blank" method="get">
    <p>
        <label>First name:
            <input type="text" name="first_name" maxlength="100" style="width:120px;">
        </label>
    </p>
    <p>
        <label>Last name:
            <input type="text" name="last_name" maxlength="100" style="width:120px;">
        </label>
    </p>
    <input type="submit" value="Submit">
</form>

اتصال input به form

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

در مثال زیر ، تمام عناصر مربوط به فرم را خارج از تگ input قرار داده ام. اما من عمداً فقط دو عنصر را با فرم مرتبط کردم (برای نشان دادن تأثیر ویژگی فرم). نام اول با یک فرم مرتبط شده است اما نام خانوادگی آن را ندارد. بنابراین ، نام خانوادگی همراه با فرم ارسال نمی شود و صفحه اقدام نام خانوادگی کاربران را تأیید نمی کند.

<form action="#" target="_blank" method="get" id="customer_name">

</form>
<p>
    <label>First name:
        <input form="customer_name" type="text" name="first_name" maxlength="100" style="width:120px;">
    </label>
</p>
<p>
    <label>Last name:
        <input type="text" name="last_name" maxlength="100" style="width:120px;">
    </label>
</p>
<input form="customer_name" type="submit" value="Submit">

دکمه های رادیو

در این مثال ، ما دکمه های رادیویی را ایجاد می کنیم. این کار را با دادن مقداری radio به صفت type انجام می دهیم. هر دکمه رادیویی در یک گروه باید دارای همان مقدار نام باشد – به همین ترتیب با هم مرتبط می شوند. ارزش همان چیزی است که گزینه های مختلف را متمایز می کند.

<p>Which prize do you prefer?</p>
<form>
    <label>
        <input type="radio" name="prize" value="house">House
    </label>
    <label>
        <input type="radio" name="prize" value="money">$1 million
    </label>
    <label>
        <input type="radio" name="prize" value="none">No prize thanks, I'm already happy :)
    </label>
</form>

عناصر مرتبط با فرم

از تگ input به عنوان یک عنصر مرتبط با فرم یاد می شود. به این دلیل که می تواند صاحب فرم داشته باشد.

در اینجا عناصر مرتبط با فرم در HTML وجود دارد.

• <button>
• <fieldset>
• <input>
• <keygen>
• <label>
• <object>
• <output>
• <select>
• <textarea>
• <img>

ویژگی های تک input

ویژگی ها را می توان به یک عنصر HTML اضافه کرد تا اطلاعات بیشتری در مورد نحوه رفتار آن ارائه داد.

تگ input ویژگی های زیر را می پذیرد.