创建表单的基本步骤如下:
使用 <form>
标签创建表单,其中包含了表单中的各种输入元素,如文本框、单选框、复选框等。
使用各种输入元素的标签(如 <input>
、<select>
、<textarea>
等)来创建表单中的具体输入元素,并利用不同的 type
属性来指定不同的输入类型。
使用 <label>
标签来为输入元素添加标签,便于用户理解每个输入元素的用途。
示例代码如下:
<h3>创建表单</h3>
<p>使用 <code><form></code> 标签创建表单,其中包含了表单中的各种输入元素:</p>
<pre>
<form>
<!-- 输入元素 -->
</form>
</pre>
<p>使用各种输入元素的标签(如 <code><input></code>、<code><select></code>、<code><textarea></code> 等)来创建表单中的具体输入元素,并利用不同的 <code>type</code> 属性来指定不同的输入类型:</p>
<pre>
<form>
<!-- 文本框 -->
<label>用户名:<input type="text" name="username"></label>
<!-- 密码框 -->
<label>密码:<input type="password" name="password"></label>
<!-- 单选框 -->
<label>性别:</label>
<label><input type="radio" name="gender" value="male">男</label>
<label><input type="radio" name="gender" value="female">女</label>
<!-- 复选框 -->
<label>爱好:</label>
<label><input type="checkbox" name="hobby" value="reading">阅读</label>
<label><input type="checkbox" name="hobby" value="music">音乐</label>
<!-- 下拉列表 -->
<label>城市:</label>
<select name="city">
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="guangzhou">广州</option>
</select>
<!-- 文本域 -->
<label>个人简介:</label>
<textarea name="intro"></textarea>
</form>
</pre>
<p>使用 <code><label></code> 标签为输入元素添加标签,便于用户理解每个输入元素的用途:</p>
<pre>
<form>
<label>用户名:<input type="text" name="username"></label>
<label>密码:<input type="password" name="password"></label>
<label>性别:</label>
<label><input type="radio" name="gender" value="male">男</label>
<label><input type="radio" name="gender" value="female">女</label>
<label>爱好:</label>
<label><input type="checkbox" name="hobby" value="reading">阅读</label>
<label><input type="checkbox" name="hobby" value="music">音乐</label>
<label>城市:</label>
<select name="city">
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="guangzhou">广州</option>
</select>
<label>个人简介:</label>
<textarea name="intro"></textarea>
</form>
</pre>
说明:
- 使用 `name` 属性指定输入元素的名称,以便在提交表单时可以获取到对应的值。
- 使用 `value` 属性指定输入元素的值,如单选框和复选框的选项值。
- 在每个输入元素的 `label` 标签中包含对应的输入元素,从而实现点击标签也可以选中输入元素的效果。
- 可以通过在 `<input>` 标签中指定 `required` 属性来要求用户必须填写该输入元素,通过指定 `disabled` 属性来禁用该输入元素,以及通过指定 `readonly` 属性来只读该输入元素。