小册名称:编程入门课:HTML(5)从入门到实战
表单是Web页面中最常用的用户交互元素之一,用于收集用户输入的数据并将其提交到后台处理。在HTML中,表单的基本结构由
一、<form>标签
<form>标签用于定义一个表单,其基本语法如下:
<form>
<form action="URL" method="HTTP_METHOD"> <!-- 表单元素 --></form>
<form action="URL" method="HTTP_METHOD">
<!-- 表单元素 -->
</form>
其中,action属性指定表单提交的URL地址,method属性指定表单提交的HTTP方法,常用的有GET和POST两种方式。表单元素包括文本框、密码框、单选框、复选框、下拉列表和文本域等。
二、文本框
文本框用于接收用户输入的单行文本,其基本语法如下:
<input type="text" name="username" value="default value">
其中,type属性指定文本框类型为”text”,name属性指定文本框的名称,value属性指定文本框的默认值。
三、密码框
密码框用于接收用户输入的密码,其基本语法如下:
<input type="password" name="password">
其中,type属性指定密码框类型为”password”,name属性指定密码框的名称。
四、单选框
单选框用于让用户从多个选项中选择一个,其基本语法如下:
<input type="radio" name="gender" value="male">男<input type="radio" name="gender" value="female">女
<input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="female">女
其中,type属性指定单选框类型为”radio”,name属性指定单选框所属的组名,value属性指定单选框的值,同时,单选框也需要设置一个显示文本。
五、复选框
复选框用于让用户从多个选项中选择多个,其基本语法如下:
<input type="checkbox" name="hobby" value="reading">阅读<input type="checkbox" name="hobby" value="music">音乐<input type="checkbox" name="hobby" value="sports">运动
<input type="checkbox" name="hobby" value="reading">阅读
<input type="checkbox" name="hobby" value="music">音乐
<input type="checkbox" name="hobby" value="sports">运动
其中,type属性指定复选框类型为”checkbox”,name属性指定复选框所属的组名,value属性指定复选框的值,同时,复选框也需要设置一个显示文本。
六、下拉列表
下拉列表用于让用户从多个选项中选择一个,其基本语法如下:
<select name="city"> <option value="beijing">北京</option> <option value="shanghai">上海</option> <option value="guangzhou">广州</option></select>
<select name="city">
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="guangzhou">广州</option>
</select>
其中,name属性指定下拉列表的名称,<option>标签用于定义下拉列表中的选项,value属性指定选项的值,同时,<option>标签也需要设置一个显示文本。
<option>
七、文本域
文本域用于接收用户输入的多行文本,其基本语法如下:
<textarea name="content"></textarea>
其中,name属性指定文本域的名称。
八、提交按钮
提交按钮用于提交表单数据,其基本语法如下:
<input type="submit" value="提交">
其中,type属性指定按钮类型为”submit”,value属性指定按钮显示的文本。
九、重置按钮
重置按钮用于重置表单数据,将表单元素的值恢复为默认值,其基本语法如下:
<input type="reset" value="重置">
其中,type属性指定按钮类型为”reset”,value属性指定按钮显示的文本。
下面是一个完整的表单示例,包括文本框、密码框、单选框、复选框、下拉列表、文本域和提交按钮:
<form action="/submit" method="post"> <label for="username">用户名:</label> <input type="text" id="username" name="username" value="admin"><br> <label for="password">密码:</label> <input type="password" id="password" name="password"><br> <label>性别:</label> <input type="radio" name="gender" value="male" id="male"><label for="male">男</label> <input type="radio" name="gender" value="female" id="female"><label for="female">女</label><br> <label>爱好:</label> <input type="checkbox" name="hobby" value="reading" id="reading"><label for="reading">阅读</label> <input type="checkbox" name="hobby" value="music" id="music"><label for="music">音乐</label> <input type="checkbox" name="hobby" value="sports" id="sports"><label for="sports">运动</label><br> <label for="city">城市:</label> <select id="city" name="city"> <option value="beijing">北京</option> <option value="shanghai">上海</option> <option value="guangzhou">广州</option> </select><br> <label for="content">内容:</label> <textarea id="content" name="content"></textarea><br> <input type="submit" value="提交"> <input type="reset" value="重置"></form>
<form action="/submit" method="post">
<label for="username">用户名:</label>
<input type="text" id="username" name="username" value="admin"><br>
<label for="password">密码:</label>
<input type="password" id="password" name="password"><br>
<label>性别:</label>
<input type="radio" name="gender" value="male" id="male"><label for="male">男</label>
<input type="radio" name="gender" value="female" id="female"><label for="female">女</label><br>
<label>爱好:</label>
<input type="checkbox" name="hobby" value="reading" id="reading"><label for="reading">阅读</label>
<input type="checkbox" name="hobby" value="music" id="music"><label for="music">音乐</label>
<input type="checkbox" name="hobby" value="sports" id="sports"><label for="sports">运动</label><br>
<label for="city">城市:</label>
<select id="city" name="city">
</select><br>
<label for="content">内容:</label>
<textarea id="content" name="content"></textarea><br>