input表单控件

文本框

1
2
3
4
5
6
<form name="form1" action="register.jsp" method="POST">
姓名:<input type="text" name="username"><br>
电话:<input type="text" name="tel" size="20"><br>
邮编:<input type="text" name="PC" maxlength="6"><br>
主页:<input type="text" name="url" value="http://">
</form>

效果如下:

姓名:
电话:
邮编:
主页:

密码框

1
2
3
4
<form action="register.jsp" method="POST">
姓名:<input type="text" name="user_name"><br>
密码:<input type="password" name="psw">
</form>

效果如下:

姓名:
密码:

隐藏域

  • 隐藏域不会被浏览者看到,它是给开发人员用于在不同页面传递域中所设定的值
1
2
3
<form action="register.jsp" method="POST">
<input type="hidden" name="域名称" value="域值">
</form>

文件域

1
2
3
<form action="register.jsp" method="POST">
<input type="file" name="域名称">
</form>

效果如下:

单选框与复选框

  1. 单选框
1
2
3
<form action="register.jsp" method="POST">
<input type="radio" name="域名称" value="域值" checked="checked">
</form>
1
2
3
<form action="register.jsp" method="POST">
<input type="radio" name="域名称" value="域值">
</form>

效果如下:

  1. 多选框
1
2
3
4
5
6
7
8
9
<form action="register.jsp" method="POST">
性别:
<input type="radio" value="female" name="gender">
<input type="radio" value="male" name="gender"><br>
爱好:
<input type="checkbox" value="music" name="m1" checked="checked">音乐
<input type="checkbox" value="trip" name="m2">旅游
<input type="checkbox" value="reading" name="m3" checked="checked">阅读
</form>

效果如下:

性别:
爱好: 音乐 旅游 阅读

提交按钮

1
2
3
4
<form action="register.jsp" method="POST">
请输入用户名:<input type="text" name="username">
<input type="submit" name="按钮名称" value="登录">
</form>

效果如下:

请输入用户名:

普通按钮

1
2
3
<form action="register.jsp" method="POST">
<input type="button" value="按钮显示文本" onclick="javascript函数名" name="按钮名称">
</form>

效果如下:

重置按钮

1
2
3
4
<form action="register.jsp" method="POST">
请输入用户名:<input type="text" name="username">
<input type="reset" value="取消">
</form>

效果如下:

请输入用户名:

图像按钮

1
2
3
<form action="register.jsp" method="POST">
<input type="image" name="名称" src="图像路径" alt="替换信息" width="宽度值" height="高度值">
</form>

button元素按钮

1
2
3
<form action="register.jsp" method="POST">
<button><img src="" alt=""></button>
</form>

label标签

  • 单击这个标签(文本)可以使光标聚焦在input元素上
1
2
3
4
5
6
<form action="">
<input type="radio" value="female" name="gender">
<label>
<input type="radio" value="male" name="gender">
</label>
</form>

效果如下:

选择列表

多项选择列表

1
2
3
4
5
6
7
8
9
10
<form>
请选择您最喜欢吃的水果:<select name="fruit" size="5" multiple>
<option value="banana" selected>香蕉</option>
<option value="apple">苹果</option>
<option value="pear" selected = "selected">梨子</option>
<option value="grape" selected = "selected">葡萄</option>
<option value="watermelon">西瓜</option>
<option value="peach">桃子</option>
</select>
</form>

效果如下:

请选择您最喜欢吃的水果:

下拉列表

1
2
3
4
5
6
7
8
9
<form>
请选择您的学历:<select name="degree">
<option value="1">博士后</option>
<option value="2" selected = "selected">博士</option>
<option value="3">硕士</option>
<option value="4">学士</option>
<option value="0">其它</option>
</select>
</form>

效果如下:

请选择您的学历: