input标签
属性:input标签不写type,默认类型是单文本框
maxlength:该属性是输入值的最大长度
value:该属性指当前文本框的值
min:最小值
max:最大值
checked:选择属性(默认选择男/女)
checkedbox:复选属性
placeholder:智能提示属性
type=“text” 单行文本框
type=“passwrd” 密码框
type=“radio” 单选框
type=“button” 普通按钮
type=“submit” 提交按钮
type=“reset” 重置按钮
type=“file” 文件选上传,设置格式可以选择文件的上传类型(设置accept属性)
注意:按钮里面的额提交和重置只针对form表单有效,不在form内部,无效,和普通按钮效果一样–>
<form action="" method="get">
<input type="text" maxlength="10" value="1234" placeholder="请输入id"/>
<input type="password" placeholder="请输入密码。。。"/>
<br/>
<!--以下两个选项男女都可以选-->
<input type="radio"/>男
<input type="radio"/>女
<br/>
<!--以下两个选项只能二选一-->
<input type="radio" name="sex"/>男
<input type="radio" name="sex"/>女
<br/>
<!-- 以下选项默认选择男-->
<input type="radio" name="sex" checked/>男
<input type="radio" name="sex"/>女
<br/>
<input type="checkbox" checked/>足球
<input type="checkbox"/>篮球
<br/>
<!--给普通按钮赋值注册-->
<input type="button" value="注册"/>
<br/>
<!--submit是提交按钮,如果不想要提交按钮,弄一个value输入想要的值 -->
<input type="submit" value="注册"/>
<br/>
<input type="reset"/>
<br/>
<input type="file" multiple accept=".jpg,.png"/>
<br/>
下拉菜单
select:下拉菜单,里面的option属性
selected 默认选择
value:选择内容对应的值
multiple:-设置多选->
<!--下方程序,默认选择咸阳市,赋值012是后台区别市区看到的内容-->
<select >
<option >请选择</option>
<option value="0">西安市</option>
<option value="1" selected>咸阳市</option>
<option value="2" >宝鸡市</option>
</select>
<br/>
<!-- 下拉菜单选择多项,加一个 multipe 可以实现多选-->
<select multiple>
<option >-请选择-</option>
<option value="5">西安市</option>
<option value="6">咸阳市</option>
<option value="7">北京市</option>
</select>
<br/>
textarea:文本域
一个框框里面可以输入文字
属性:row=“20” 设置20行
cols=“80” 设置80列
<textarea> cols="80" rows="20">
<br/>
</textarea>
<form action="" method="get">
<ul>
<li>
姓名:<input type="text" name="name"/>
</li>
<li>
年龄:<input type="text" name="age"/>
</li>
<li>
密码:<input type="password" name="password"/>
</li>
<li>
爱好:<input type="checkbox" value="0" name="hobby"/>篮球
<input type="checkbox" value="1" name="hobby"/>足球
<input type="checkbox" value="2" name="hobby"/>羽毛球
</li>
<li>
备注:<textarea name="detail" ></textarea>
</li>
<li><input type="submit"/><input type="reset"/></li>
</ul>
</form>