本文介绍了HTML中用于创建表单、输入字段、选择器、按钮等网页元素的基本语法和用法，包括文本输入框、单选按钮、复选框、下拉列表、按钮等，并展示了如何通过表单动作属性实现数据提交。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
</head>
<body>
<form >
first name:
<input type="text" name="firstname" maxlength="20"/> <!--文本域输入-->
<br/>
last name:
<input type="text" name="lastname"/>
</form>
<form>
<input type="radio" name="sex" value="male"/>male <!--单选按钮-->
<br/>
<input type="radio" name="sex" value="famale"/>famale
</form>
<form>
<input type="checkbox" name="bike"/> <!--复选框按钮-->
l have a bike
<br />
<input type="checkbox" name="car"/>
l have a car
</form>
<form name="input" action="html_form_action.asp" method="get"> <!--表单动作属性-->
username:
<input type="text " name="user"/>
<input type="submit" value="submit"/>
</form>
</body>
</html>
<html>
<body bgcolor="#c0c0c0">
<form>
<select name="cars">
<option value="volvo">volvo</option> <!--简单的下拉列表-->
<option value ="saab">saab</option>
<option value="helle">helle</option>
<option value="father">father</option>
<option value="mather">mather</option>
<option value ="helllllle">helllllle</option>
</select>
</form>
</body>
</html>
<html> <!----html之间的文本描述网页--->
<head>
<title>document mane goes here</title> <!--标题不显示在窗口中--->
</head>
<body>
<form>
<input type="button" value="l love you baby!"> <!--按钮创建--->
</form>
</body>
</html>
<html>
<body bgcolor="#c0c0c0"> <!--背景为黑色-->
<fieldset> <!--fieldset定义域--->
<legend>健康信息：</legend> <!--legend定义域标题-->
<form>
<label>身高：<input type="text"/ ></label>
<label>体重：<input type ="text"/></label> <!---绘制带标题的框-->
</form>
</fieldset>
</body>
</html>
<html>
<body>
<form action ="/example/html/form_action.asp" method="get">
<p> first name:<input type="text" name="fname"/></p> <!---带有输入框和确定按钮的表单-->
<p> last name:<input type="text" name="lname"/></p>
<input type="submit" value="submit"/>
</form>
</body>
</html>
<html>
<body>
<from name="input" action="/html/html_form_action.asp" method="get">
l have a bike:
<input type="radio" name="vehicle" value="bike" checked ="checked"/>
<br/>
l have a car:
<input type="radio" name="vehicle" value="car"/>
<br/> <!--带有单选框的表单-->
l have an airplane:
<input type="radio" name="vehicle" value="airplane"/>
<br/><br/>
<input type="submit" value="submit"/>
</form>
</body>
</html>
<html>
<body>
<h1 style="font-family:vendana ;font-size:200%;color:red">A heading</h1>
<p style="font-family:vendana ;color:blue;margin-left:20px">
this is a paragraph with some text in it.this is a paragraph whih some text in it and l learn some code by myself <!--设置字体、尺寸、颜色-->
</p>
</body>
</html>
<head>
<style type="text/css">
body {backgroud-color;red}
p {margin-left:20px}
</style>
</head>
<a href="news:alt.html">html newsgroup</a> <!--创建一个链接--->
<p>
<a href ="mailto:someone@w3school.com.cn">someone@w3school.co.cn</a> <!--创建链接到邮件系统-->
</p>
<html>
<body>
<script type="text/javascript">
document.write("<h1>hello world!</h1>") <!--插入一脚本--->
</script>
</body>
</html>
<html>
<body>
<script type="text/javascript">
<!--document.write("hello world!")'-->
</script>
<noscript>your broeser does not support vbscript</noscript>
</body>
</html>
<html>
<body>
<abbr title="people's republic of china ">PRC</abbr>was founded in 1949.
<p title="free web tutorials">W3School.com.cn</p> <!--使用title属性--->
</body>
</html>
<html>
<body>
<h1>春眠</h1>
<p>
春眠不觉晓，
处处闻啼鸟。
夜来风雨声，
花落知多少。
</p>
<p>注意，浏览器忽略了源代码中的排版（省略了多余的空格和换行）。</p>
</body>
</html>
扫一扫
1501
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
