استخدام placeholder
بداخل المدخل
يظهر كما ف الصور ف صندوق الادخال
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style>
</style>
</head>
<body>
<form name="register">
<label><!--تسميه حقل الادخال-->
Username
</label>
<input type="text" name="username" placeholder="type your name" ><!--المدخلات-->
<label><!--تسميه حقل الادخال-->
Password
</label>
<input type="password" name="password" placeholder="type your pass"><!--المدخلات-->
</form>
</body>
</html>
#html
@codedevelopment
بداخل المدخل
يظهر كما ف الصور ف صندوق الادخال
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style>
</style>
</head>
<body>
<form name="register">
<label><!--تسميه حقل الادخال-->
Username
</label>
<input type="text" name="username" placeholder="type your name" ><!--المدخلات-->
<label><!--تسميه حقل الادخال-->
Password
</label>
<input type="password" name="password" placeholder="type your pass"><!--المدخلات-->
</form>
</body>
</html>
#html
@codedevelopment
استخدام
maxlength
لتحديد عدد المدخل
كما ف الصورة حدد له 5
ولا يستطيع ادخال اكثر من 5
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style>
</style>
</head>
<body>
<form name="register">
<label><!--تسميه حقل الادخال-->
Username
</label>
<input type="text" name="username" placeholder="type your name" maxlength="5" ><!--المدخلات-->
<label><!--تسميه حقل الادخال-->
Password
</label>
<input type="password" name="password" placeholder="type your pass" ><!--المدخلات-->
</form>
</body>
</html>
#Html
@codedevelopment
maxlength
لتحديد عدد المدخل
كما ف الصورة حدد له 5
ولا يستطيع ادخال اكثر من 5
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style>
</style>
</head>
<body>
<form name="register">
<label><!--تسميه حقل الادخال-->
Username
</label>
<input type="text" name="username" placeholder="type your name" maxlength="5" ><!--المدخلات-->
<label><!--تسميه حقل الادخال-->
Password
</label>
<input type="password" name="password" placeholder="type your pass" ><!--المدخلات-->
</form>
</body>
</html>
#Html
@codedevelopment
عمل زر submin
مثل زر singup
كما ف الصورة
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style>
</style>
</head>
<body>
<form name="register">
<label><!--تسميه حقل الادخال-->
Username
</label>
<input type="text" name="username" placeholder="type your name" ><!--المدخلات-->
<br>
<label><!--تسميه حقل الادخال-->
Password
</label>
<input type="password" name="password" placeholder="type your pass" ><!--المدخلات-->
<br>
<input type="checkbox">
<label>Remember name</label>
<br>
<input type="submit" value="sing up">
</form>
</body>
</html>
#html
@codedevelopment
مثل زر singup
كما ف الصورة
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style>
</style>
</head>
<body>
<form name="register">
<label><!--تسميه حقل الادخال-->
Username
</label>
<input type="text" name="username" placeholder="type your name" ><!--المدخلات-->
<br>
<label><!--تسميه حقل الادخال-->
Password
</label>
<input type="password" name="password" placeholder="type your pass" ><!--المدخلات-->
<br>
<input type="checkbox">
<label>Remember name</label>
<br>
<input type="submit" value="sing up">
</form>
</body>
</html>
#html
@codedevelopment
This media is not supported in your browser
VIEW IN TELEGRAM
اضافه زر reset
لمسح ما كتبته
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style>
</style>
</head>
<body>
<form name="register">
<label><!--تسميه حقل الادخال-->
Username
</label>
<input type="text" name="username" placeholder="type your name" ><!--المدخلات-->
<br>
<label><!--تسميه حقل الادخال-->
Password
</label>
<input type="password" name="password" placeholder="type your pass" ><!--المدخلات-->
<br>
<input type="checkbox">
<label>Remember name</label>
<br>
<input type="submit" value="sing up">
<input type="reset">
</form>
</body>
</html>
#Html
@codedevelopment
لمسح ما كتبته
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style>
</style>
</head>
<body>
<form name="register">
<label><!--تسميه حقل الادخال-->
Username
</label>
<input type="text" name="username" placeholder="type your name" ><!--المدخلات-->
<br>
<label><!--تسميه حقل الادخال-->
Password
</label>
<input type="password" name="password" placeholder="type your pass" ><!--المدخلات-->
<br>
<input type="checkbox">
<label>Remember name</label>
<br>
<input type="submit" value="sing up">
<input type="reset">
</form>
</body>
</html>
#Html
@codedevelopment
This media is not supported in your browser
VIEW IN TELEGRAM
اضافة
input
لرفع الملفات
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style>
</style>
</head>
<body>
<form name="register">
<label><!--تسميه حقل الادخال-->
Username
</label>
<input type="text" name="username" placeholder="type your name" ><!--المدخلات-->
<br>
<label><!--تسميه حقل الادخال-->
Password
</label>
<input type="password" name="password" placeholder="type your pass" ><!--المدخلات-->
<br>
<label>Upload your file</label>
<input type="file">
<br>
<input type="checkbox">
<label>Remember name</label>
<br>
<input type="submit" value="sing up">
<input type="reset">
</form>
</body>
</html>
#Html
@codedevelopment
input
لرفع الملفات
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style>
</style>
</head>
<body>
<form name="register">
<label><!--تسميه حقل الادخال-->
Username
</label>
<input type="text" name="username" placeholder="type your name" ><!--المدخلات-->
<br>
<label><!--تسميه حقل الادخال-->
Password
</label>
<input type="password" name="password" placeholder="type your pass" ><!--المدخلات-->
<br>
<label>Upload your file</label>
<input type="file">
<br>
<input type="checkbox">
<label>Remember name</label>
<br>
<input type="submit" value="sing up">
<input type="reset">
</form>
</body>
</html>
#Html
@codedevelopment
This media is not supported in your browser
VIEW IN TELEGRAM
استخدام مدخل
radio
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style>
</style>
</head>
<body>
<form name="register">
<label><!--تسميه حقل الادخال-->
Username
</label>
<input type="text" name="username" placeholder="type your name" ><!--المدخلات-->
<br>
<label><!--تسميه حقل الادخال-->
Password
</label>
<input type="password" name="password" placeholder="type your pass" ><!--المدخلات-->
<br>
<label>Upload your file</label>
<input type="file">
<br>
<input type="checkbox">
<label>Remember name</label>
<br>
<label>Choose your browser</label>
<br>
<input type="radio" name="browser" value="Chrome">Google Chrome <br>
<input type="radio" name="browser" value="FireFox">Mozila FireFox <br>
<input type="radio" name="browser" value="Opera">Opera <br>
<br>
<input type="submit" value="sing up">
<input type="reset">
</form>
</body>
</html>
#Html
@codedevelopment
radio
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style>
</style>
</head>
<body>
<form name="register">
<label><!--تسميه حقل الادخال-->
Username
</label>
<input type="text" name="username" placeholder="type your name" ><!--المدخلات-->
<br>
<label><!--تسميه حقل الادخال-->
Password
</label>
<input type="password" name="password" placeholder="type your pass" ><!--المدخلات-->
<br>
<label>Upload your file</label>
<input type="file">
<br>
<input type="checkbox">
<label>Remember name</label>
<br>
<label>Choose your browser</label>
<br>
<input type="radio" name="browser" value="Chrome">Google Chrome <br>
<input type="radio" name="browser" value="FireFox">Mozila FireFox <br>
<input type="radio" name="browser" value="Opera">Opera <br>
<br>
<input type="submit" value="sing up">
<input type="reset">
</form>
</body>
</html>
#Html
@codedevelopment
This media is not supported in your browser
VIEW IN TELEGRAM
عمل حقل لكتابه رساله واستخدام
read anly
لقراءه مافي الحقل فقط
ملحوظه
cols="30"
rows="6"
عدد الاعمده
#html
@codedevelopment
read anly
لقراءه مافي الحقل فقط
ملحوظه
cols="30"
rows="6"
عدد الاعمده
#html
@codedevelopment
تاج select:
يكتب هكذا <select></select>
وداخله نضع خيارات عبر تاج <option>
ويكتب هكذا <optipn></option>
تستطيع ادخال اكثر من option
مثال:
<select>
<option>Html</option>
<option>css</option>
<option>javascript</option>
</select>
#html
@codedevelopment
يكتب هكذا <select></select>
وداخله نضع خيارات عبر تاج <option>
ويكتب هكذا <optipn></option>
تستطيع ادخال اكثر من option
مثال:
<select>
<option>Html</option>
<option>css</option>
<option>javascript</option>
</select>
#html
@codedevelopment
Web Development Code
استخدام تاج select
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style>
</style>
</head>
<body>
<form name="register">
<fieldset>
<legend>Information</legend>
<label><!--تسميه حقل الادخال-->
Username
</label>
<input type="text" name="username" placeholder="type your name" ><!--المدخلات-->
<br>
<label><!--تسميه حقل الادخال-->
Password
</label>
<input type="password" name="password" placeholder="type your pass" ><!--المدخلات-->
</fieldset>
<br>
<label>Your Message</label> <br>
<textarea cols="30" rows="6" readonly>your name : nour </textarea>
<br>
<label>Upload your file</label>
<input type="file">
<br>
<input type="checkbox">
<label>Remember name</label>
<br>
<fieldset>
<legend>Your Choose</legend>
<label>Choose your browser</label>
<br>
<input type="radio" name="browser" value="Chrome">Google Chrome <br>
<input type="radio" name="browser" value="FireFox">Mozila FireFox <br>
<input type="radio" name="browser" value="Opera">Opera <br>
<br>
</fieldset>
<select name="time">
<option value="">Now</option>
<option value="">Tomorrow</option>
<option value="">After A Week</option>
</select>
<input type="submit" value="sing up">
<input type="reset">
</form>
</body>
</html>
#html
@codedevelopment
<html>
<head>
<title>test</title>
<style>
</style>
</head>
<body>
<form name="register">
<fieldset>
<legend>Information</legend>
<label><!--تسميه حقل الادخال-->
Username
</label>
<input type="text" name="username" placeholder="type your name" ><!--المدخلات-->
<br>
<label><!--تسميه حقل الادخال-->
Password
</label>
<input type="password" name="password" placeholder="type your pass" ><!--المدخلات-->
</fieldset>
<br>
<label>Your Message</label> <br>
<textarea cols="30" rows="6" readonly>your name : nour </textarea>
<br>
<label>Upload your file</label>
<input type="file">
<br>
<input type="checkbox">
<label>Remember name</label>
<br>
<fieldset>
<legend>Your Choose</legend>
<label>Choose your browser</label>
<br>
<input type="radio" name="browser" value="Chrome">Google Chrome <br>
<input type="radio" name="browser" value="FireFox">Mozila FireFox <br>
<input type="radio" name="browser" value="Opera">Opera <br>
<br>
</fieldset>
<select name="time">
<option value="">Now</option>
<option value="">Tomorrow</option>
<option value="">After A Week</option>
</select>
<input type="submit" value="sing up">
<input type="reset">
</form>
</body>
</html>
#html
@codedevelopment
This media is not supported in your browser
VIEW IN TELEGRAM
Shake animation on invalid inputs using HTML & CSS
Link the video to YouTube:
https://youtu.be/_ceLUxczgGw
#CSS
Link the video to YouTube:
https://youtu.be/_ceLUxczgGw
#CSS