下面是一个基本的 HTML 表单的完整代码,包括输入框、单选按钮、复选框、下拉框、文本框和提交按钮等元素:
<form action="submit.php" method="post"> <label for="username">用户名:</label> <input type="text" id="username" name="username" placeholder="请输入用户名" required> <br> <label for="gender">性别:</label> <input type="radio" id="male" name="gender" value="male" checked> <label for="male">男</label> <input type="radio" id="female" name="gender" value="female"> <label for="female">女</label> <br> <label>爱好:</label> <input type="checkbox" id="music" name="hobby" value="music"> <label for="music">音乐</label> <input type="checkbox" id="sports" name="hobby" value="sports"> <label for="sports">运动</label> <input type="checkbox" id="reading" name="hobby" value="reading"> <label for="reading">阅读</label> <br> <label for="city">城市:</label> <select id="city" name="city"> <option value="beijing">北京</option> <option value="shanghai">上海</option> <option value="guangzhou">广州</option> <option value="shenzhen">深圳</option> </select> <br> <label for="message">留言:</label> <textarea id="message" name="message" rows="5" cols="30"></textarea> <br> <input type="submit" value="提交"> <input type="reset" value="重置"> </form>
在上面的代码中,<form>
元素定义了一个表单,其中 action
属性指定了表单提交的目标 URL,method
属性指定了表单提交的 HTTP 方法(可以是 GET 或 POST)。 表单中包含了多个表单元素,如 <input>
、<select>
和 <textarea>
等。
这些元素分别对应了输入框、下拉框和文本框等不同的表单控件。 有些表单元素使用了 name
属性,这是为了在提交表单时将表单数据作为键值对发送到后端服务器。
例如,<input>
元素的 name
属性值为 "username"
,则在提交表单时会将输入框中的值作为 "username"
键名的值发送到后端服务器。
还有些表单元素使用了其他属性,如 required
属性表示该字段为必填字段,checked
属性表示单选按钮或复选框默认选中。
在表单的最后,还包含了两个按钮,分别是提交按钮和重置按钮。这两个按钮都是 <input>
元素,其中 type
属性分别设置为 "submit"
和 "reset"
。
评论