نحوه دریافت ورودی از کاربران صفحه وب خود
موارد زیر را بیان خواهیم کرد
- بررسی اجمالی
- ورودی متن
- ورودی
- محل ورود متن های بلند
- دکمه ها
- ورودی های انتخابی
Select box
Radio 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
را در فصل بعدی استایل کنیم.