html5--表单

表单用于收集不同类型的用户输入

form标签用于为用户创建html表单

//method为传值方式  action为提交路径
<form action="url地址" method="get/post" name="表单名称">
<p>文本</p>
    <input type="text" name='username' size="40px" maxlenth="8" placehoder="提示文字"     autofocus="autofocus">文本框
    <input type="text" name="username" value="html" readonly="readonly">只读
    <input type="text" name="username" value="html" disabled="disabled">禁用
<p>密码</p>
    <input type="password" name="password">密码
<p>单选框</p>
    <input type="radio" name="sex" value="1">男
    <input type="radio" name="sex" value="0">女
<p>多选框</p>
    <input type="checkbox" name="" checked="checked">游戏
    <input type="checkbox" name="">睡觉
    <input type="checkbox" name="">游泳
<p>重置</p>
    <input type="reset" name=''>
<p>提交</p>
    <input type="submit" name=''>
<p>按钮</p>
    <button>搜索</button>
</form>

input 元素中的属性：

name:控件名称

value:当前控件的值

readonly:只读，不可修改

disabled:禁用，不可操作

checked:与多选，单选配合固定默认选项

size:输入框的宽度

maxlength:输入时文本最大长度

placehoder:输入时提示的文本信息

autofocus:当页面重新加载时，input元素自动获取焦点

表单中的下拉列表和文本域：

下拉列表：

//size:可见个数  multiple:属性规定可同时选择多个选项  disabled:禁用
<select size="2" multiple="multiple" disabled="disabled"> 
    <option>苹果</option>
    <option selectd="selectd">香蕉</option><!--select:默认选中-->
    <option>葡萄</option>
</select>

文本域：

<!--rows:可输入行数 cols：可见宽度  maxlenth：可输入的最大字符数-->
<textarea rows="4" cols="10" maxlenth="8">
</textarea>

新增表单元素和输入类型：

预定义列表：

<input type="" name="" list="list_1">
<datalist id="list_1">
    <option value="php"/>
    <option value="html"/>
    <option value="java"/>
</datalist>

email类型：

<!--自动验证是否是邮箱格式-->
<input type="email" name="">

url类型：

<!--验证是否是url格式-->
<input type="url" name="">

number类型：

<!--输入值大于等于3小于等于8-->
<input type="number" name='' min='3' max='8'>

range类型：

<!--滑动选择-->
<input type='range' name='' min='3' max='8'>

日期选择器：

<input type="date" name=''>