HTML中form表单的基本用法
<form action="" method="get" onactivate>
<input type="url" />
<input type="submit"value="提交" />
</form>
- action:定义了在提交表单是,应该把数据发送到哪个URL或模块去处理
- method:定义了发送数据的http方法——get和post
- novalidate:决定了提交表单是需不需要验证表单,默认验证
<form action="" method="get" novalidate>
<input autofocus type="text" /><br>
<input disabled type="text"/><br>
<input name="inputValue" type="text" /><br>
<input value="吴彦祖" name="inputValue1" type="text"/><br>
<input type="submit" value="提交"/>
</form>
常用原生的表单部件元素的属性
- autofocus:页面加载时元素会自动具备输入焦点,页面最好只有一个
- disabled:用户不能再和元素进行交互
- name:元素的值和表单数据一起提交,并且以键值对的形式传递
- value:决定了元素的初始值
<!-- 当行文本框 -->
单行文本框:<input type="text" />
<!-- 密码框 -->
密码框:<input type="password" name="" id="" value="" />
<!-- 不显示的空间,但值仍然会提交到服务器里去 -->
<input type="hidden" name="UserID"value="666" />
<!-- 通过name属性值对radio进行分组操作,允许在拥有相同name值的选项中选其中的一个 -->
<input type="radio" name="gender" id="" value="1"/>男
<input type="radio" name="gender" id="" value="2"/>女
<!-- 复选框 可设置选中还是未选中 -->
<!-- checked 用于设置单选框或者多选框是否被选中 -->
<input checked type="checkbox" name="hobby" id="" value="1" />Java
<input checked type="checkbox" name="hobby" id="" value="2" />Python
<input type="checkbox" name="hobby" id="" value="3" />C语言
<input type="checkbox" name="hobby" id="" value="4" />Go语言
颜色选择器:<input type="color" name="" id="" value="" />
日期选择器(年月日):<input type="date" name="" id="" value="" />
月选择器:<input type="month" name="" id="" value="" />
邮件收入:<input type="email" name="" id="" value="" />
文件上传:<input type="file" name="" id="" value="" />
数字控件:<input type="number" name="" id="">
搜索框:<input type="search" name="" id="" value="" />
<input type="url" name="" id="" value="" /><br>
<input type="submit" name="" id="" value="提交" /><br>
<input type="reset" name="" id="" value="重置" /><br>
<input type="button" name="" id="" value="普通按钮" />
<!-- fieldset 用于分割表单,legend 定了表单的小标题 -->
<form action="" method="">
<fieldset id="">
<legend>这是一个表单的标题</legend>
<input autofocus type="text" /><br>
<input disabled type="text"/><br>
<input name="inputValue" type="text" /><br>
<input value="吴彦祖" name="inputValue1" type="text"/><br>
<input type="submit" value="提交"/>
</fieldset>
</form>
<!-- label标签的for属性与input标签的id属性可以产生相关联的效果 -->
<form action="" method="">
<label for = "username">姓名:</label>
<input type="" name="" id="username" value="text" />
<br>
<label>密码:</label>
<input type="password" name="" id="" value="" />
</form>
<!-- button disable不可用 type:submit reset button 通过name 和 value 传值给服务器 -->
<form action="" method="">
<button disabled type="submit" name="" value="">提交</button>
<button disabled type="reset" name="" value="">重置</button>
<button disabled type="button" name="" value="">按钮</button>
</form>
<!-- 多行文本框 -->
<form action="" method="">
<textarea style="resize: none;" name="textareaValue" id="" cols="10" rows="10"></textarea>
</form>
- clos:文本域的宽度,多少列,默认为20列
- rows:文本域的高度,多少行
- style=“resize:none;” 阻止多行文本域自由缩放
- textarea中,只接受纯文本的内容,任何HTML内容都会被显示成纯文本内容
<h1>下拉内容</h1>
下拉单选框
<select name="selectValue1">
<option value="">选项一</option>
<option value="">选项二</option>
<option value="">选项三</option>
<option value="">选项四</option>
</select>
下拉多选框
<!-- multiple 是否多选 -->
<select multiple name="selectValu2">
<option value="">选项一</option>
<option value="">选项二</option>
<option value="">选项三</option>
<option value="">选项四</option>
</select>
<!-- input 中 list 的值要和 datalist的id保持一致,
一旦数据列表与表单小部件相关联,就可以实现模糊搜索的功能
-->
自动补全输入框
<input type="text" list="mySelect" name="" id="" value="" />
<datalist id="mySelect">
<option value="">选项一</option>
<option value="">选项二</option>
<option value="">选项三</option>
<option value="">选项四</option>
</datalist>
<!--
enctype 属性 是在method的属性为post时,决定了表单的提交给服务器的MIME类型是什么
application/x-www-form-urlencoded 未指定属性默认值
multipart/form-data 如果表单中包含文件上传的功能(type="file")必须使用此值
text/plain 常用于测试
-->
<form action="" enctype="application/x-www-form-urlencoded"></form>
<form action="" enctype="multipart/form-data"></form>
<form action="" enctype="text/plain"></form>