input表单控件

文本框

<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>

效果如下：

密码框

<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
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>

效果如下：

多选框

<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>

提交按钮

<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>

效果如下：

重置按钮

<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元素上

<form action="">
            <input type="radio" value="female" name="gender">女
            <label>
            <input type="radio" value="male" name="gender">男
            </label>
</form>

效果如下：

选择列表

多项选择列表

<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>

效果如下：

下拉列表

<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>