HTML5中的表单_h5表单提交文字颜色-CSDN博客

本文链接：https://blog.csdn.net/qq_34216631/article/details/81781468

本文介绍了HTML5中新增的各种表单元素及其用法，包括文本域、单选按钮、复选框、颜色选择器、日期时间选择器等。通过这些元素可以创建更加丰富和交互式的网页表单。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>三、HTML5中的表单</title>
<script type="text/javascript" language="javascript">
	var r,g,b;
	setColor();
	function setColor(){
		r = document.getElementById("r").value;
		g = document.getElementById("g").value;
		b = document.getElementById("b").value;
		strColor = "rgb("+r+","+g+","+b+")";
	document.getElementById("color").innerHTML=strColor;
	document.getElementById("colorPrev").style.backgroundColor=strColor;
	}

  function ShowKeyWord(){	
    var str=document.getElementById("txtKeyWord").value;
    str = "<b>您输入的关键字是:</b>"+str;
    document.getElementById("show").innerHTML = str;
    return false;
  }
</script>

</head>

<body>
文本域:
<form> 
姓: <input type="text" name="firstname" /> <br /> 
名: <input type="text" name="lastname" /> 
</form>
-------------------------------------------------------------------
<br>
单选按钮:
<form> 
<input type="radio" name="sex" value="m" /> 男 <br /> <input type="radio" name="sex" value="f" /> 女 
</form>
<hr><hr>

<form name=“input” action=“a.html” method=“get”> 
	姓名: <input type="text" name="user" /> 
	<input type="submit" value="Submit" /> 
</form>
<hr><hr>

<form>
<!--fieldset用于从逻辑上将表单中的元素组合起来并且会在相关表单      
      元素周围绘制边框-->
<!--legend为 fieldset 元素定义标题-->
<fieldset>
   <legend>请输入邮件地址:</legend>
   <input type="email" name="u_email" multiple="true"/>
   <input type="submit" value="提交">
</fieldset>
</form>
<hr><hr>

<form>
	<fieldset>
		<legend>请输入URL地址:</legend>
		<input type="url" name="user_url" />
		<input type="submit" value="提交">
	</fieldset>
</form>
<hr><hr>

<form>
   <fieldset>
   <legend>请输入数字:</legend>
   <input type="number" min="1" max="10" />
   <input type="submit" value="提交">
   </fieldset>
</form>
<hr><hr>

<form>
	<fieldset>
	<legend>请设置你喜欢的颜色:</legend>
	<input id="r" type="range" value="0" min="0" max="255" onchange="setColor();"/>
	<input id="g" type="range" value="0" min="0" max="255" onchange="setColor();"/>
	<input id="b" type="range" value="0" min="0" max="255" onchange="setColor();"/>
	<span id="colorPrev">我是背景色</span>
	<p id="color">rgb(0,0,0)</p>
	</fieldset>
</form>
<hr><hr>


<fieldset>
	<legend>日期与时间类型输入框:</legend>
	<input type="date">
	<input type="time">
</fieldset>
<fieldset>
	<legend>月份与星期输入框:</legend>
	<input type="month">
	<input type="week">
</fieldset>
<fieldset>
	<legend>日期时间型输入框:</legend>
	<input type="datetime">
	<input type="datetime-local">
</fieldset>
<hr><hr>

<form onSubmit="return ShowKeyWord();">
  <fieldset>
	<legend>请输入关键字:</legend>
		<input type="search" id="txtKeyWord">
		<input type="submit" value="提交">
  </fieldset>
  <p id="show"></p>
</form>
<hr><hr>


<form>
	UserName: <input type="text" name="user_name" autofocus="true" />
	</br>
	Password: <input type="text" name="password"  />
	</br>
	<input type="submit" />
</form>
<hr><hr>






</body>
</html>