HTML表单

 

一：文本

 

<input type="text" name="userrname" />用户名

 

二：密码框

 

<input type="password" name="username" />密码

 

三：单选按钮

 

<input type="radio" name="sex" value="男"/>男

 

<input type="radio" name="sex" value="女" checked="checked"/>女

 

注：在单选按钮中name属性值必须一样，才能被选中。checked表示被默认选中

 

四：多选按钮

 

<input type="checkbox" name=""/>唱歌

 

<input type="checkbox" name=""/>旅游

五：label标签

 

<input type="checkbox" name="" id="n"/><label for="n">唱歌<label>

 

注：运用label标签的好处：提升用户体验。原本没加label标签，点击文字是不能选择的，但是加了label就能点击。

 

for 属性应当与相关元素的 id 属性相同。

 

六：下拉列表

 

<select name="dizhi" size="3">

 

<option value="1">长沙</option>

 

<option value="2">上海</option>

 

<option value="3">武汉</option>

 

</select>

 

注：size:表示显示下拉的数目

 

七：文本域

 

<textarea rows="6" cols="40" name=""></textarea>

 

注：rows表示行（宽）的意思，clos表示列（高）的意思

 

八：提交按钮

 

<input type="submit" value="提交按钮"/>提交按钮

 

九：重置按钮

 

<input type="reset" value="重置按钮"/>重置按钮

 

十：表单form

 

<form action="#" method="get/post"></form>

 

注：action表示提交地址。method表示表单传参，一般考虑安全采用post传值。

 

总结：在表单中name的作用是传递到后台数据库相对应的名称，而value就是值。