نحوه دریافت ورودی از کاربران صفحه وب خود
موارد زیر را بیان خواهیم کرد
- بررسی اجمالی
- ورودی متن
- ورودی
- محل ورود متن های بلند
- دکمه ها
- ورودی های انتخابی
Select boxRadio button +checkbox
فرم های HTML محل دریافت ورودی از کاربر در صفحات وب هستند. اگر تا به حال از وبلاگ بازدید کرده اید و نظر خود را گذاشته اید یا از کارت اعتباری خود به صورت آنلاین برای خرید چیزی استفاده کرده اید ، از فرم های HTML برای تعامل با صفحه وب و ورود اطلاعات خود استفاده کرده اید.
حتی در صفحه لاگین برای دریافت نام کاربری و رمز ورود کاربر به فرم HTML نیاز خواهیم داشت. بیایید ابتدا با استفاده از برچسب form&یک عنصر فرم ایجاد کنیم:
<html>
<head>
<title>Working with HTML Forms</title>
</head>
<body>
<h1>Login Page</h1>
<form>
</form>
</body>
</html>
همانطور که ممکن است متوجه شده باشید ، تنها چیزی که در خروجی وجود دارد عنصر h1 است. به این دلیل که عنصر <form> فقط فرم HTML را به مرروگراعلام می کند.
برای شروع پذیرش ورودی کاربر ، بیایید یک عنصر <input> اضافه کنیم که متن را می پذیرد:
<html>
<head>
<title>Working with HTML Forms</title>
</head>
<body>
<h1>Login Page</h1>
<form>
<input type=”text” id=”firstTextInput” name=”firstTextInput”>
</form>
</body>
</html>
اکنون باید توجه داشته باشید که یک جعبه متن خالی وجود دارد که می توانید با کلیک متن ورودی را وارد کنید. همچنین توجه داشته باشید که عناصر <input> تگ بسته ندارند.
اما داشتن فقط یک جعبه متن نشان نمی دهد که ورودی برای چه کاری استفاده می شود. بیایید یک عنصر <label> اضافه کنیم تا معنی <input> را بهتر نشان دهیم:
<html>
<head>
<title>Working with HTML Forms</title>
</head>
<body>
<h1>Login Page</h1>
<form>
<label for=”username”>
Username:
<input type=”text” id=”username” name=”username”>
</label>
</form>
</body>
</html>
عنصر <label> دارای یک ویژگی for است که <label> را با یک عنصر خاص <input> مرتبط می کند. مقدار ویژگی for باید با مقدار id عنصر <input> مطابقت داشته باشد. عناصر <label> مفید هستند زیرا به شما اجازه می دهند عناصر <input> توسط خوانندگان صفحه شناسایی شود.
اکنون می توانیم یک عنصر <input> اضافی که رمز عبور کاربر را می پذیرد اضافه کنیم و یک <label> برای نشان دادن معنی ورودی اضافه کنیم.
<html>
<head>
<title>Working with HTML Forms</title>
</head>
<body>
<h1>Login Page</h1>
<form>
<label for=”username”>
Username:
<input type=”text” id=”username” name=”username”>
</label>
<label for=”password”>
Password:
<input type=”password” id=”password” name=”password”>
</label>
</form>
</body>
</html>
توجه داشته باشید که اگر در قسمت رمز عبور می نویسید ، متن پنهان است زیرا ما مشخص کردیم که ویژگی نوع <input> دارای مقدار رمز عبور است.
با در نظر گرفتن این مثال ، بیایید غواصی کنیم و به انواع ورودی هایی که می توانیم با فرم های HTML استفاده کنیم ، نگاه کنیم.
ورودی متن
<input>
ما دیده ایم که چگونه عنصر <input> می تواند مقادیر متن را بپذیرد. چندین مقدار مختلف وجود دارد که می تواند مورد استفاده قرار گیرد ، از جمله:
- text: برای متن ساده
password: برای پنهان کردن قسمت ورودی رمز عبورsearch: برای نشان دادن قسمت متن برای جستجوی یک صفحه / چندین صفحه استفاده می شودurl: ورودی را به عنوان آدرس URL تأیید می کندtel: برای وارد کردن شماره تلفن هاemail: ورودی را به عنوان آدرس ایمیل تأیید می کند- در مورد آدرس و ایمیل ، مرورگر بررسی می کند که آیا ورودی یک
URL یا آدرس ایمیل معتبر است.
<html>
<head>
<title>Email Validation</title>
</head>
<body>
<form>
<p>Try inputting text that isn’t email and press ‘Enter'</p>
<label for=”email”>
E-mail Address:
<input type=”email” id=”email” name=”email”>
</label>
</form>
</body>
</html>
<html>
<head>
<title>URL Validation</title>
</head>
<body>
<form>
<p>Try inputting text that isn’t a valid URL and press ‘Enter'</p>
<label for=”url”>
URL:
<input type=”url” id=”url” name=”url”>
</label>
</form>
</body>
</html>
<textarea>
اگر می خواهید کاربر شما بتواند خطوط جدید (با فشار دادن Return) را در ورودی متن خود وارد کند ، می توانید از عنصر <textarea> استفاده کنید:
<html>
<head>
<title>Textarea Elements</title>
</head>
<body>
<form>
<label for=”multiLineInput”>
<p>This is an input element that can include new lines:</p>
<textarea id=”multiLineInput”></textarea>
</label>
</form>
</body>
</html>
توجه کنید که عناصر <textarea> چگونه تگ بسته دارند. با استفاده از مشخصه های cols و rows می توانید اندازه <textarea> را نیز تعیین کنید.
<html>
<head>
<title>Textarea Elements</title>
</head>
<body>
<form>
<label for=”multiLineInput”>
<p>This is an input element that can include new lines:</p>
<textarea rows=”5″ cols=”50″ id=”multiLineInput”></textarea>
</label>
</form>
</body>
</html>
دکمه ها
هر زمان که می خواهید یک دکمه قابل کلیک برای ایجاد برخی اقدامات در صفحه ایجاد کنید ، باید از عنصر <button> استفاده شود.
<button> تگ ساده است و دارای سه مقدار مختلف است:
submit: داده های فرم را به یک سرور ارسال می کند
reset: تمام داده ها را در فرم فعلی بازنشانی می کند
button: بدون رفتار پیش فرض. این نوع دکمه ها وقتی بحث Javascript را شروع می کنیم مفیدتر خواهد بود.
<html>
<head>
<title>Submit Button</title>
</head>
<body>
<form>
<label for=”firstName”>First Name:</label>
<input type=”text” name=”firstName” id=”firstName”>
<label for=”lastName”>Last Name:</label>
<input type=”text” name=”lastName” id=”lastName”>
<!– This button will submit the form, causing page to redirect –>
<button type=”submit”>Submit Name</button>
</form>
</body>
</html>
<html>
<head>
<title>Reset Button</title>
</head>
<body>
<form>
<label for=”firstName”>First Name:</label>
<input type=”text” name=”firstName” id=”firstName”>
<label for=”lastName”>Last Name:</label>
<input type=”text” name=”lastName” id=”lastName”>
<!– This button will reset the form –>
<button type=”reset”>Reset Name</button>
</form>
</body>
</html>
<html>
<head>
<title>No-Default Button</title>
</head>
<body>
<form>
<label for=”firstName”>First Name:</label>
<input type=”text” name=”firstName” id=”firstName”>
<label for=”lastName”>Last Name:</label>
<input type=”text” name=”lastName” id=”lastName”>
<!– This button does nothing by default –>
<button type=”button”>Do Nothing</button>
</form>
</body>
</html>
ورودی های انتخابی
<select>
برای ایجاد یک گزینه کشویی از مواردی که کاربر می تواند از بین آنها انتخاب کند ، می توانید از عناصر <select> استفاده کنید:
<html>
<head>
<title>Selection Inputs</title>
</head>
<body>
<form>
<label for=”selector”>
<p>A <code>select</code> element allows users to input from a selection:</p>
<select id=”selector”>
<option>Option ۱</option>
<option>Option ۲</option>
<option selected>Option ۳</option>
<option>Option ۴</option>
</select>
</label>
</form>
</body>
</html>
درج گزینه های آن با تگ <<option میسر است.
علاوه بر این ، اگر می خواهید گزینه ها را در دسته های مختلف گروه بندی کنید ، می توانید عناصر <option> را در یک عنصر <optgroup> قرار دهید:
<html>
<head>
<title>Selection Inputs</title>
</head>
<body>
<form>
<label for=”selector”>
<p>A <code>select</code> element allows users to input from a selection:</p>
<select id=”selector”>
<optgroup label=”Group ۱″>
<option>Option ۱</option>
<option>Option ۲</option>
</optgroup>
<optgroup label=”Group ۲″>
<option>Option ۳</option>
<option>Option ۴</option>
</optgroup>
<optgroup label=”Group ۳″>
<option>Option ۵</option>
<option>Option ۶</option>
</optgroup>
</select>
</label>
</form>
</body>
</html>
radio button +checkbox <input>
عنصر <input> مقادیر نوع دیگری دارد که ورودی های غیر از متن را می پذیرد. به عنوان مثال ، از radio button می توان برای ایجاد لیستی از گزینه ها استفاده کرد که فقط می خواهید یک گزینه انتخاب شود:
<html>
<head>
<title>Radio Buttons</title>
</head>
<body>
<form>
<h3>What time is best to give you a call?</h3>
<label for=”morning”>
Morning
<input type=”radio” id=”morning” name=”callTime” checked>
</label>
<label for=”afternoon”>
Afternoon
<input type=”radio” id=”afternoon” name=”callTime”>
</label>
<label for=”evening”>
Evening
<input type=”radio” id=”evening” name=”callTime”>
</label>
</form>
</body>
</html>
برای گروه بندی دکمه های رادیو در یک انتخاب ، هر مشخصه نام عنصر <input> باید دارای همان مقدار باشد. با انتخاب ویژگی ، یکی از دکمه های رادیو هنگام بارگیری صفحه انتخاب می شود.
اگر می خواهید لیستی ایجاد کنید که کاربر می تواند گزینه دیگری را انتخاب کند، از یک عنصر <input> با یک نوع checkbox می توان یک جعبه چک را تعیین کرد:
<html>
<head>
<title>Radio Buttons</title>
</head>
<body>
<!– The following radio buttons will not be considered part of the same group since they don’t have
the same “name” attribute. –>
<form>
<h3>What time is best to give you a call?</h3>
<label for=”morning”>
Morning
<input type=”radio” id=”morning”>
</label>
<label for=”afternoon”>
Afternoon
<input type=”radio” id=”afternoon”>
</label>
<label for=”evening”>
Evening
<input type=”radio” id=”evening”>
</label>
</form>
</body>
</html>
<html>
<head>
<title>Radio Buttons</title>
</head>
<body>
<form>
<h3>Select all the times that you are available:</h3>
<label for=”morning”>
Morning
<input type=”checkbox” id=”morning” name=”callTime” checked>
</label>
<label for=”afternoon”>
Afternoon
<input type=”checkbox” id=”afternoon” name=”callTime”>
</label>
<label for=”evening”>
Evening
<input type=”checkbox” id=”evening” name=”callTime”>
</label>
</form>
</body>
</html>
اکنون که با اصول HTML آشنا شدید ، بیایید بیاموزیم که یک صفحه HTML را در فصل بعدی استایل کنیم.
