ﺖﭙﯾﺮﮑﺳﺍ ﺍﻭﺎﺟ HTML ﯼﺩﻭﺭﻭ ﯼﺎﻫ ﻪﻧﻮﻤﻧ


فهرست مطالب

    نمایش فهرست مطالب


HTML ﯼﺭﺎﮑﺘﺳﺩ ﻭ ﯽﺳﺮﺘﺳﺩ ﯼﺍﺮﺑ ﺖﭙﯾﺮﮑﺳﺍ ﺍﻭﺎﺟ ﺯﺍ ﻩﺩﺎﻔﺘﺳﺍ ﺯﺍ ﯽﯾﺎﻫ ﻪﻧﻮﻤﻧ


ﻪﻤﮐﺩ ﻢﺴﺟ

ﺪﯿﻨﮐ ﻝﺎﻌﻓﺮﯿﻏ ﺍﺭ ﻪﻤﮐﺩ ﮏﯾ

<!DOCTYPE html>
<html>
<body>

<form>
<input type="button" id="btn01" value="OK">
</form>

<p>Click the "Disable" button to disable the "OK" button:</p>

<button onclick="disableElement()">Disable</button>

<script>
function disableElement() {
  document.getElementById("btn01").disabled = true;
}
</script>

</body>
</html>

ﺪﯿﻨﮐ ﺍﺪﯿﭘ ﺍﺭ ﻪﻤﮐﺩ ﮏﯾ ﻡﺎﻧ

<!DOCTYPE html>
<html>
<body>

<form id="frm1" action="/action_page.php">
<button id="btn1" name="subject" type="submit" value="HTML">HTML</button>
</form>

<p>Click the "Try it" button to display the name of the "HTML" button:</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
function myFunction() {
  var x = document.getElementById("btn1").name;
  document.getElementById("demo").innerHTML = x;
}
</script>

</body>
</html>

ﺪﯿﻨﮐ ﺍﺪﯿﭘ ﺍﺭ ﻪﻤﮐﺩ ﻉﻮﻧ

<!DOCTYPE html>
<html>
<body>

<button id="btn1" type="button">HTML</button>

<p>Click the "Try it" button to return the type of the "HTML" button:</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
function myFunction() {
  var x = document.getElementById("btn1").type;
  document.getElementById("demo").innerHTML = x;
}
</script>

</body>
</html>

ﺪﯿﻨﮐ ﺍﺪﯿﭘ ﺍﺭ ﻪﻤﮐﺩ ﮏﯾ ﺭﺍﺪﻘﻣ

<!DOCTYPE html>
<html>
<body>

<form id="frm1" action="/action_page.php">
<button id="btn1" name="subject" type="submit" value="fav_HTML">HTML</button>
<button id="btn2" name="subject" type="submit" value="fav_CSS">CSS</button>
</form>

<p>Click the "Try it" button to return the value of the "HTML" button:</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
function myFunction() {
  var x = document.getElementById("btn1").value;
  document.getElementById("demo").innerHTML = x;
}
</script>

</body>
</html>

ﺪﯿﻨﮐ ﺍﺪﯿﭘ ﺍﺭ ﻪﻤﮐﺩ ﮏﯾ ﯼﻭﺭ ﻩﺪﺷ ﻩﺩﺍﺩ ﺶﯾﺎﻤﻧ ﻦﺘﻣ

<!DOCTYPE html>
<html>
<body>

<form id="frm1" action="/action_page.php">
<button id="btn1" name="subject" type="submit" value="fav_HTML">HTML</button>
<button id="btn2" name="subject" type="submit" value="fav_CSS">CSS</button>
</form>

<p>Click the "Try it" button to return the text on the "HTML" button:</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
function myFunction() {
  var x = document.getElementById("btn1").innerHTML;
  document.getElementById("demo").innerHTML = x;
}
</script>

</body>
</html>

ﺪﯿﻨﮐ ﺍﺪﯿﭘ ﺍﺭ ﺩﺭﺍﺩ ﻖﻠﻌﺗ ﻥﺁ ﻪﺑ ﻪﻤﮐﺩ ﮏﯾ ﻪﮐ ﯽﻣﺮﻓ ﻪﺳﺎﻨﺷ

<!DOCTYPE html>
<html>
<body>

<form id="form1">
<button id="btn1" type="button">HTML</button>
</form>

<p>Click the "Try it" button to display the id of the form the HTML button belongs to:</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
function myFunction() {
  var x = document.getElementById("btn1").form.id;
  document.getElementById("demo").innerHTML = x;
}
</script>

</body>
</html>

ﻡﺮﻓ ﯽﺷ

ﺪﯿﻨﮐ ﻝﺎﺳﺭﺍ ﻡﺮﻓ

<!DOCTYPE html>
<html>
<body>

<p>Enter names in the fields, then click "Submit" to submit the form:</p>

<form id="frm1" action="/action_page.php">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br><br>
  <input type="button" onclick="myFunction()" value="Submit">
</form>

<script>
function myFunction() {
  document.getElementById("frm1").submit();
}
</script>

</body>
</html>

ﺪﯿﻨﮐ ﯽﻧﺎﺸﻧﺯﺎﺑ ﺍﺭ ﻡﺮﻓ ﮏﯾ

<!DOCTYPE html>
<html>
<body>

<p>Enter names in the fields below, then click "Reset" to reset the form.</p>

<form id="frm1">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br><br>
  <input type="button" onclick="myFunction()" value="Reset">
</form>

<script>
function myFunction() {
  document.getElementById("frm1").reset();
}
</script>

</body>
</html>

ﺪﯿﻨﮐ ﺍﺪﯿﭘ ﻡﺮﻓ ﮏﯾ ﺭﺩ ﺍﺭ ﺮﺼﻨﻋ ﺮﻫ ﺭﺍﺪﻘﻣ

<!DOCTYPE html>
<html>
<body>

<form id="frm1" action="/action_page.php">
  First name: <input type="text" name="fname" value="Donald"><br>
  Last name: <input type="text" name="lname" value="Duck"><br><br>
  <input type="submit" value="Submit">
</form> 

<p>Click "Try it" to display the value of each element in the form.</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
function myFunction() {
  var x = document.getElementById("frm1");
  var text = "";
  var i;
  for (i = 0; i < x.length ;i++) {
    text += x.elements[i].value + "<br>";
  }
  document.getElementById("demo").innerHTML = text;
}
</script>

</body>
</html>

ﺪﯿﻨﮐ ﺍﺪﯿﭘ ﺍﺭ ﻡﺮﻓ ﮏﯾ ﻩﺪﺷ ﻪﺘﻓﺮﯾﺬﭘ ﯼﺎﻫﺮﺘﮐﺍﺭﺎﮐ ﻪﻋﻮﻤﺠﻣ

<!DOCTYPE html>
<html>
<body>

<form id="frm1" accept-charset="ISO-8859-1">
  First name: <input type="text" name="fname" value="Donald"><br>
  Last name: <input type="text" name="lname" value="Duck"><br>
</form>

<p>Click "Try it" to display accept-charset of the form:</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
function myFunction() {
  var x = document.getElementById("frm1").acceptCharset;
  document.getElementById("demo").innerHTML = x;
}
</script>

</body>
</html>

ﺪﯿﻨﮐ ﺍﺪﯿﭘ ﺍﺭ ﻡﺮﻓ ﮏﯾ ﻞﻤﻋ ﯽﮔﮋﯾﻭ

<!DOCTYPE html>
<html>
<body>

<form id="frm1" action="/action_page.php">
  First name: <input type="text" name="fname" value="Donald"><br>
  Last name: <input type="text" name="lname" value="Duck"><br><br>
  <input type="submit" value="Submit">
</form>

<p>Click "Try it" to display the value of the form's action attribute:</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
function myFunction() {
  var x = document.getElementById("frm1").action;
  document.getElementById("demo").innerHTML = x;
}
</script>

</body>
</html>

ﺪﯿﻨﮐ ﺍﺪﯿﭘ ﻡﺮﻓ ﮏﯾ ﺭﺩ ﺍﺭ enctype ﻪﺼﺨﺸﻣ ﺭﺍﺪﻘﻣ

<!DOCTYPE html>
<html>
<body>

<form id="frm1" action="/action_page.php" method="post">
  First name: <input type="text" name="fname" value="Donald"><br>
  Last name: <input type="text" name="lname" value="Duck"><br><br>
  <input type="submit" value="Submit">
</form>

<p>Click "Try it" to display the value of the enctype attribute of the form:</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
function myFunction() {
  var x = document.getElementById("frm1").enctype;
  document.getElementById("demo").innerHTML = x;
}
</script>

</body>
</html>

ﺪﯿﻨﮐ ﺍﺪﯿﭘ ﺍﺭ ﻡﺮﻓ ﮏﯾ ﺭﺩ ﺩﻮﺟﻮﻣ ﺮﺻﺎﻨﻋ ﺩﺍﺪﻌﺗ

<!DOCTYPE html>
<html>
<body>

<form id="frm1" action="/action_page.php">
  First name: <input type="text" name="fname" value="Donald"><br>
  Last name: <input type="text" name="lname" value="Duck"><br><br>
  <input type="submit" value="Submit">
</form>

<p>Click "Try it" to display the number of elements the form:</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
function myFunction() {
  var x = document.getElementById("frm1").length;
  document.getElementById("demo").innerHTML = x;
}
</script>

</body>
</html>

ﺪﯿﻨﮐ ﺍﺪﯿﭘ ﺍﺭ ﻡﺮﻓ ﯼﺎﻫ ﻩﺩﺍﺩ ﻝﺎﺳﺭﺍ ﺵﻭﺭ

<!DOCTYPE html>
<html>
<body>

<form id="frm1" action="/action_page.php" method="get">
  First name: <input type="text" name="fname" value="Donald"><br>
  Last name: <input type="text" name="lname" value="Duck"><br><br>
  <input type="submit" value="Submit">
</form>

<p>Click "Try it" to display the value of the form method.</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
function myFunction() {
  var x = document.getElementById("frm1").method;
  document.getElementById("demo").innerHTML = x;
}
</script>

</body>
</html>

ﺪﯿﻨﮐ ﺍﺪﯿﭘ ﺍﺭ ﻡﺮﻓ ﮏﯾ ﻡﺎﻧ

<!DOCTYPE html>
<html>
<body>

<form id="frm1" name="form1" action="/action_page.php">
  First name: <input type="text" name="fname" value="Donald"><br>
  Last name: <input type="text" name="lname" value="Duck"><br><br>
  <input type="submit" value="Submit">
</form>

<p>Click "Try it" to display the name of the form:</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
function myFunction() {
  var x = document.getElementById("frm1").name;
  document.getElementById("demo").innerHTML = x;
}
</script>

</body>
</html>

ﺪﯿﻨﮐ ﺍﺪﯿﭘ ﺍﺭ ﻡﺮﻓ ﮏﯾ ﻑﺪﻫ

<!DOCTYPE html>
<html>
<body>

<form id="frm1" action="/action_page.php" target="_self">
  First name: <input type="text" name="fname" value="Donald"><br>
  Last name: <input type="text" name="lname" value="Duck"><br><br>
  <input type="submit" value="Submit">
</form>

<p>Click "Try it" to display the target of the form:</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
function myFunction() {
  var x = document.getElementById("frm1").target;
  document.getElementById("demo").innerHTML = x;
}
</script>

</body>
</html>

ﺪﯿﻨﮐ ﺏﺎﺨﺘﻧﺍ ﺍﺭ Objects ﻭ ﻪﻨﯾﺰﮔ

ﺪﯿﻨﮐ ﻝﺎﻌﻓ ﻭ ﻝﺎﻌﻓﺮﯿﻏ ﺍﺭ ﯽﯾﻮﺸﮐ ﺖﺴﯿﻟ ﮏﯾ

<!DOCTYPE html>
<html>
<head>
<script>
function disable() {
  document.getElementById("mySelect").disabled=true;
}
function enable() {
  document.getElementById("mySelect").disabled=false;
}
</script>
</head>
<body>

<form>
<select id="mySelect">
  <option>Apple</option>
  <option>Pear</option>
  <option>Banana</option>
  <option>Orange</option>
</select>
<br><br>
<input type="button" onclick="disable()" value="Disable list">
<input type="button" onclick="enable()" value="Enable list">
</form>

</body>
</html>

ﺪﯿﻨﮐ ﺖﻓﺎﯾﺭﺩ ﺍﺭ ﯽﯾﻮﺸﮐ ﺖﺴﯿﻟ ﯼﻭﺎﺣ ﻡﺮﻓ ﻪﺳﺎﻨﺷ

<!DOCTYPE html>
<html>
<body>

<form id="myForm">
<select id="mySelect">
  <option>Apple</option>
  <option>Pear</option>
  <option>Banana</option>
  <option>Orange</option>
</select>
</form>

<p>The id of the form is:<p>
<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = document.getElementById("mySelect").form.id;
</script>

</body>
</html>

ﺪﯿﻨﮐ ﺖﻓﺎﯾﺭﺩ ﺍﺭ ﯽﯾﻮﺸﮐ ﺖﺴﯿﻟ ﺭﺩ ﺩﻮﺟﻮﻣ ﯼﺎﻫ ﻪﻨﯾﺰﮔ ﺩﺍﺪﻌﺗ

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<form>
<select id="mySelect">
  <option>Apple</option>
  <option>Pear</option>
  <option>Banana</option>
  <option>Orange</option>
</select>
</form>

<p>There are <span id="demo">0</span> options in the list.</p>

<script>
document.getElementById("demo").innerHTML =
document.getElementById("mySelect").length;
</script>

</body>
</html>

ﺪﯿﻨﮐ ﻞﯾﺪﺒﺗ ﯽﻄﺧ ﺪﻨﭼ ﺖﺴﯿﻟ ﮏﯾ ﻪﺑ ﺍﺭ ﯽﯾﻮﺸﮐ ﺖﺴﯿﻟ

<!DOCTYPE html>
<html>
<head>
<script>
function changeSize() {
  document.getElementById("mySelect").size = 4;
}
</script>
</head>
<body>

<form>
<select id="mySelect">
  <option>Apple</option>
  <option>Banana</option>
  <option>Orange</option>
  <option>Melon</option>
</select>
<input type="button" onclick="changeSize()" value="Change size">
</form>

</body>
</html>

ﺪﯿﻨﮐ ﺏﺎﺨﺘﻧﺍ ﯽﯾﻮﺸﮐ ﺖﺴﯿﻟ ﮏﯾ ﺭﺩ ﺍﺭ ﻪﻨﯾﺰﮔ ﻦﯾﺪﻨﭼ

<!DOCTYPE html>
<html>
<head>
<script>
function selectMultiple() {
  document.getElementById("mySelect").multiple = true;
}
</script>
</head>
<body>

<form>
<select id="mySelect" size="4">
  <option>Apple</option>
  <option>Pear</option>
  <option>Banana</option>
  <option>Orange</option>
</select>
<input type="button" onclick="selectMultiple()" value="Select multiple">
</form>

<p>Before you click "Select multiple", you cannot select more than one option (by holding down the Shift or Ctrl key).</p>
<p>After you have clicked &quot;Select multiple", you can.</p>

</body>
</html>

ﺪﯿﻫﺩ ﺶﯾﺎﻤﻧ ﯽﯾﻮﺸﮐ ﺖﺴﯿﻟ ﮏﯾ ﺭﺩ ﺍﺭ ﻩﺪﺷ ﺏﺎﺨﺘﻧﺍ ﻪﻨﯾﺰﮔ

<!DOCTYPE html>
<html>
<head>
<script>
function getOption() {
  var obj = document.getElementById("mySelect");
  document.getElementById("demo").innerHTML = 
  obj.options[obj.selectedIndex].text;
}
</script>
</head>
<body>

<form>
Select your favorite fruit:
<select id="mySelect">
  <option>Apple</option>
  <option>Orange</option>
  <option>Pineapple</option>
  <option>Banana</option>
</select>
<br><br>
<input type="button" onclick="getOption()" value="Click Me!">
</form>

<p id="demo"></p>

</body>
</html>

ﯽﯾﻮﺸﮐ ﺖﺴﯿﻟ ﮏﯾ ﺯﺍ ﺎﻫ ﻪﻨﯾﺰﮔ ﻪﻤﻫ ﺶﯾﺎﻤﻧ

<!DOCTYPE html>
<html>
<head>
<script>
function getOptions() {
  var x = document.getElementById("mySelect");
  var txt = "";
  var i;
  for (i = 0; i < x.length; i++) {
    txt = txt + " " + x.options[i].text;
  }
  document.getElementById("demo").innerHTML = txt;
}
</script>
</head>
<body>

<form>
Select your favorite fruit:
<select id="mySelect">
  <option>Apple</option>
  <option>Orange</option>
  <option>Pineapple</option>
  <option>Banana</option>
</select>
<br><br>
<input type="button" onclick="getOptions()" value="Output all options">
</form>

<p id="demo"></p>

</body>
</html>

ﺪﯿﻫﺩ ﺶﯾﺎﻤﻧ ﯽﯾﻮﺸﮐ ﺖﺴﯿﻟ ﮏﯾ ﺭﺩ ﺍﺭ ﻩﺪﺷ ﺏﺎﺨﺘﻧﺍ ﻪﻨﯾﺰﮔ ﻪﯾﺎﻤﻧ

<!DOCTYPE html>
<html>
<head>
<script>
function getIndex() {
  document.getElementById("demo").innerHTML =
  document.getElementById("mySelect").selectedIndex;
}
</script>
</head>
<body>

<form>
Select your favorite fruit:
<select id="mySelect">
  <option>Apple</option>
  <option>Orange</option>
  <option>Pineapple</option>
  <option>Banana</option>
</select>
<br><br>
<input type="button" onclick="getIndex()" 
value="Display the index of the selected option">
</form>

<p id="demo"></p>

</body>
</html>

ﺪﯿﻫﺩ ﺮﯿﯿﻐﺗ ﺍﺭ ﻩﺪﺷ ﺏﺎﺨﺘﻧﺍ ﻪﻨﯾﺰﮔ ﻦﺘﻣ

<!DOCTYPE html>
<html>
<head>
<script>
function changeText() {
  x = document.getElementById("mySelect");
  x.options[x.selectedIndex].text = "Melon";
}
</script>
</head>
<body>

<form>
Select your favorite fruit:
<select id="mySelect">
  <option>Apple</option>
  <option>Orange</option>
  <option>Pineapple</option>
  <option>Banana</option>
</select>
<br><br>
<input type="button" onclick="changeText()" value="Set text of selected option">
</form>

</body>
</html>

ﺪﯿﻨﮐ ﻑﺬﺣ ﯽﯾﻮﺸﮐ ﺖﺴﯿﻟ ﺯﺍ ﺍﺭ ﺎﻫ ﻪﻨﯾﺰﮔ

<!DOCTYPE html>
<html>
<head>
<script>
function removeOption() {
  var x = document.getElementById("mySelect");
  x.remove(x.selectedIndex);
}
</script>
</head>
<body>

<form>
<select id="mySelect">
  <option>Apple</option>
  <option>Pear</option>
  <option>Banana</option>
  <option>Orange</option>
</select>
<input type="button" onclick="removeOption()" value="Remove the selected option">
</form>

</body>
</html>