form表单标签

一、form表单标签

form标签是一个块级元素，以<form>开头，</form>结尾，它能够包含input、textarea、select等元素。

1.表单标签的属性

例：

<form action="" method="post" name="form">
  </form>

2.input标签

input标签可以用于收集用户输入的信息，根据type属性的值的不同，收集信息的类型也不相同，常见type属性值入下表的所示

 例：

<form action="url" method="post" name="form">
            <p>用户名：<input type="text" name="username" id="username" placeholder="请输入用户名"></p>
            <p>密码：<input type="password" name="password" id="password" placeholder="请输入密码"></p>
            <p>性别：<input type="radio" name="gender" value="nan" checked>男<input type="radio" name="gender" value="nv">女</p>
            <p>爱好：<input type="checkbox" name="aihao" value="lanqiu">篮球<input type="checkbox" name="aihao" value="yumaoqiu">羽毛球<input type="checkbox" name="aihao" value="paiqiu">排球</p>
            <p>请选的文件：<input type="file" name="wenjian" value="wenjian"></p>
            <p>请选择时间：<input type="date" name="date"></p>
            <p>请选择时间：<input type="datetime-local" name="datetime-local"></p>
            <p>请选择时间：<input type="time" name="time"></p>
            <p>请输入邮箱：<input type="email" name="email"></p>
            <p>请输入月份：<input type="number" name="number" max="12" min="1" value="1"></p>
            <p>请选择颜色：<input type="color" name="color"></p>
            <p><input type="submit" value="提交"></p>
            <p><input type="reset" value="重置"></p>
            <p><input type="button" value="普通按钮"></p>
            <p><input type="image" src="url"></p>
        </form>

input标签除了type属性外，还能设置其他属性，属性名及其用法如下表所示

 3.textarea标签

form表单中除了能使用input元素外，还能使用textarea元素，textarea能创建一个文本区，文本区的大小和宽度由cols和wors设定，cols设定文本区宽度，wors设定文本区的高度（行数）。

4.select

select是下拉选择框，里面可包含多个选项，选项在option标签中，可用size设置下拉框显示的长度，也可用mutiple属性让下拉框变成另一种样式的下拉框。