HTML表单

最新推荐文章于 2025-12-13 12:07:42 发布

原创最新推荐文章于 2025-12-13 12:07:42 发布 · 174 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #java #servlet

本文详细介绍了HTML表单的各种元素及其使用方法，包括文本框、密码框、单选框、复选框等，并提供了每种元素的具体示例及注意事项。

表单

语法

<form method="" action="">
	...<!-- 各种表单元素 -->
</form>

表单的元素

表单的元素类型

1、文本框

<input type="text" />

2、密码框

<input type="password" />

3、单选框

<input type="radio"  name="gen" value="男"/>男
<input type="radio"  name="gen" value="女"/>女

备注：
1、多个选项只选其中一项时，每个单选框的name值必须一致
2、必须要有value值
3、若某个选项为默认选中时，需要给该项添加checked属性：

<input type="radio"  name="gen" value="男" checked/>男

4、复选框

<input type="checkbox" name="hobby" value="篮球" />篮球
<input type="checkbox" name="hobby" value="足球" />足球
<input type="checkbox" name="hobby" value="羽毛球" />羽毛球

备注：
1、多个选项可以多选时，每个单选框的name值必须一致
2、必须要有value值
3、若某个选项为默认选中时，需要给该项添加checked属性：

<input type="checkbox" name="hobby" value="羽毛球" checked />羽毛球

5、文件域

<input type="file" />

6、邮件框

<input type="email" />

7、网络地址框

<input type="url" />

备注：url地址需要包含http://或https://

8、数字框

<input type="number" />

9、滑块

<input type="range" />

10、下拉列表

<select>
	<option value="选项一">选项一</option>
	<option value="选项二">选项二</option>
	...
	<option value="选项N">选项N</option>
</select>

默认选项：selected

<select>
	<option value="选项一">选项一</option>
	<option value="选项二" selected>选项二</option>
	...
	<option value="选项N">选项N</option>
</select>

11、日期框

年月日

<input type="date" />

年月日时分秒

<input type="datetime-local" />

12、文本域

<textarea></textarea>

13、普通按钮

<input type="button" value="提交"/>

14、提交按钮

<input type="submit"/>

15、重置按钮

<input type="reset"/>

16、图片按钮

<input type="image" src=""/>

src里面是图片路径

17、搜索框

<input type="search"/>

18、标注

<label for="id">标注的文本</label>
<input type="radio" name="gender" value="男" id="male"/>男

19、隐藏域

<input type="hidden" value=""/>

20、只读

<input name="name" type="text" value="张三"  readonly>

21、禁用

<input type="submit "  disabled   value="保存" >

22、提示语：placeholder

<input type="text" placeholder="请输入用户名"/>

23、必填：required

<input type="text" required/>

24、正则表达式：patten

<input type="text"  pattern="^1[358]\d{9}" />//手机号验证