form表单是将用户输入的数据做一个集合,提交时将数据提交给后台服务器,实现用户与服务器之间的交互。
1.form元素:###
action:用于提交数据的后台地址。
method:分为get和post
get:读取以及索要数据时用get,get提交的信息有限并且会显示在URL中,但提交的速度更快。
post:提交以及传出数据时用post,用post会提高安全性,提交信息不会显示在URL中,且可提交的信息量几乎无限。但提交的速度慢于get。
2. input 元素:###
input元素通过type属性设置不同的input类型:
1.text:
<div class="name">
姓名:<input type="text" name="name" placeholder="用户名">
</div>
样式:

2.password:
<div class="password">
密码:<input type="password" name="password" placeholder="密码">
</div>
样式:

3.radio:
<div class="sex">
性别:<input type="radio" name="sex" value="male" selected="selected">男
<input type="radio" name="sex" value="female">女
</div>
<div class="sexual orientation">
取向:<input type="radio" name="sexual" value="male">男
<input type="radio" name="sexual" value="female">女
</div>
样式:

4.checkbox:
<div class="hobby">
爱好:<input type="checkbox" name="hobby" value="dota">dota
<input type="checkbox" name="hobby" value="travel">旅游
<input type="checkbox" name="hobby" value="pet">宠物
</div>
样式:

5.textarea:
<div class="textarea">
评论:<textarea name="comment" id="" cols="20" rows="10" placeholder="ddd"></textarea>
</div>
样式:

5.submit:
<input type="submit" value="提交" >
样式:

6.file:
<input type="file" value="查找" accept="image/jpg,image/png">
样式:

7.hidden:
<input type="hidden" name="country" value="Norway" />
隐藏字段对于用户是不可见的。
8.reset:
<input type="reset" >
重置按钮
3. select 元素:###
<div class="selected">
我的car:
<select name="car" id="">
<option value="sabo" selected="selected">萨博</option>
<option value="audi">奥迪</option>
<option value="lambogini" >兰博基尼</option>
</select>
</div>
样式:

网友评论