“HTML表单控件”课堂示例_案例分析表单控件类型教学设计-优快云博客

本文详细介绍了HTML中各种表单元素的应用方式，包括文本输入框、密码框、文本区域、提交按钮等，并展示了如何通过属性设置来增强用户体验。

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

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Hello!</title>
</head>
<body>
<form action="" method="post">
<input type="text" name="abc" value="" maxlength="10"/> <p>
<input type="password" /><p>
<textarea rows="15" cols="10">请输入内容...</textarea><p>

<input type="submit" value="确定" />    
<input type="reset" value="重置" />    
<input type="button" value="普通按钮" />  
<input type="image" src="download.png" /><p>

<input type="checkbox" name="box" value="yinyue" />音乐<br />
<input type="checkbox" name="box" value="tiyu" checked="checked" />体育<br />
<input type="checkbox" name="box" value="shuxue" />数学<br />
<input type="checkbox" name="box" value="biancheng" />编程<br />

<input type="radio" name="myredio" value="nan" />男<br />
<input type="radio" name="myredio" value="nv" checked="checked" />女<br />

<select>
	<option value="2001">2001年</option>
    <option value="2002">2002年</option>
    <option value="2003" selected="selected">2003年</option>
    <option value="2004">2004年</option>
</select><p>

<select size="5" multiple="multiple">
	<option value="2001">2001年</option>
    <option value="2002">2002年</option>
    <option value="2003">2003年</option>
    <option value="2004">2004年</option>
</select><p>

<select>
	<optgroup label="计算机系">
    	<option>软件专业</option>
        <option>网络专业</option>
        <option>信管专业</option>
    </optgroup>
    <optgroup label="机电系">
    	<option>数控专业</option>
        <option>机械专业</option>
        <option>汽修专业</option>
    </optgroup>
</select><p>
<input type="file" accept="image/jpeg" /><p>
<input type="hidden" value="asdasdsadasd" />
</form>
</body>
</html>

本示例是为方便课堂演示用，无其他特殊意义。