HTML基础
表单元素
重要程度：9 分
<h2>表单元素</h2>
<p>表单是用于收集用户输入信息的重要工具。在HTML中，表单由 <code><form></code> 标签定义。</p>
<h3>基本结构</h3>
<pre>
<form action="submit.php" method="post">
...
</form>
</pre>
<p><strong>属性：</strong></p>
<ul>
<li><code>action</code>: 指定表单数据提交到哪个URL处理。</li>
<li><code>method</code>: 指定提交数据的方式，通常是 <code>get</code> 或 <code>post</code>。</li>
</ul>
<h3>表单控件</h3>
<p>表单控件用于让用户输入信息，常见的控件有文本框、密码框、单选按钮、复选框、下拉列表等。</p>
<h4>文本框</h4>
<pre>
<input type="text" name="username" placeholder="请输入用户名">
</pre>
<h4>密码框</h4>
<pre>
<input type="password" name="password" placeholder="请输入密码">
</pre>
<h4>单选按钮</h4>
<pre>
<input type="radio" name="gender" value="male"> 男
<input type="radio" name="gender" value="female"> 女
</pre>
<h4>复选框</h4>
<pre>
<input type="checkbox" name="interest" value="sports"> 运动
<input type="checkbox" name="interest" value="music"> 音乐
</pre>
<h4>下拉列表</h4>
<pre>
<select name="country">
<option value="china">中国</option>
<option value="usa">美国</option>
<option value="japan">日本</option>
</select>
</pre>
<h3>例题</h3>
<p>请创建一个简单的表单，包含以下内容：</p>
<ol>
<li>用户名：文本框</li>
<li>密码：密码框</li>
<li>性别：单选按钮（男/女）</li>
<li>兴趣爱好：复选框（运动、音乐）</li>
<li>国家：下拉列表（中国、美国、日本）</li>
</ol>
<pre>
<form action="submit.php" method="post">
用户名: <input type="text" name="username" placeholder="请输入用户名"><br>
密码: <input type="password" name="password" placeholder="请输入密码"><br>
性别:
男 <input type="radio" name="gender" value="male">
女 <input type="radio" name="gender" value="female"><br>
兴趣爱好:
运动 <input type="checkbox" name="interest" value="sports">
音乐 <input type="checkbox" name="interest" value="music"><br>
国家:
<select name="country">
<option value="china">中国</option>
<option value="usa">美国</option>
<option value="japan">日本</option>
</select>
<br>
<input type="submit" value="提交">
</form>
</pre>