Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 表单的各种下拉和样式大全
Blogger Information
Blog 263
fans 3
comment 2
visits 113279
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
表单的各种下拉和样式大全
福哥的博客
Original
1296 people have browsed it

指定一个预先定义的输入控件选项列表

datalist： 

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>教程</title> 
</head>
<body>
	
<form action="demo-form.php" method="get">
<input list="browsers" name="browser">
<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>
<input type="submit">
</form>

<p><strong>注意:</strong> Internet Explorer 9（更早 IE 版本），Safari 不支持 datalist 标签。</p>

</body>
</html>

1.png

定义选项组

optgroup

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>教程</title> 
</head>
<body>

<select>
  <optgroup label="Swedish Cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
  </optgroup>
  <optgroup label="German Cars">
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </optgroup>
</select>
 
</body>
</html>

1.png

定义了一组相关的表单元素，并使用外框包含起来

fieldset

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>教程</title> 
</head>
<body>

<form>
 <fieldset>
  <legend>Personalia:</legend>
  Name: <input type="text"><br>
  Email: <input type="text"><br>
  Date of birth: <input type="text">
 </fieldset>
</form>

</body>
</html>

1.png

下拉列表

select

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>教程</title> 
</head>
<body>

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>
  
</body>
</html>

单选

radio

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>教程</title> 
</head>
<body>

<form action="">
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>

<p><b>注意：</b>当用户点击一个单选按钮时，它就会被选中，其他同名的单选按钮就不会被选中。</p>

</body>
</html>

复选框

checkbox

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>教程</title> 
</head>
<body>

<form action="">
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car 
</form>

</body>
</html>

定义一个计算结果

output

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>教程</title> 
</head>
<body>

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100
+<input type="number" id="b" value="50">
=<output name="x" for="a b"></output>
</form>

<p><strong>注意:</strong>  Internet Explorer 不支持 output 标签。</p>

</body>
</html>

1.png

 在页面加载时下拉列表自动获得焦点

autofocus

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>教程</title> 
</head>
<body>

<select autofocus>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>

<p><strong>注意：</strong> Firefox 或者 Internet Explorer 9 及之前的版本不支持 select 标签的 autofocus 属性。</p>

</body>
</html>

定义 select 字段所属的一个或多个表单。

form

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>教程</title> 
</head>
<body>

<form action="http://w3schools.com/tags/demo_form.asp" id="carform">
  Firstname:<input type="text" name="fname">
  <input type="submit">
</form>
<br>
<select name="carlist" form="carform">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

<p>下拉列表超出了表单元素,但仍是表单的一部分。</p>
<p><b>注意：</b> Internet Explorer 不支持 select 标签的 form 属性。</p>

</body>
</html>

禁用下拉列表

disabled

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>教程</title> 
</head>
<body>

<select disabled>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

</body>
</html>

允许在下拉列表中进行多选

multiple 

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>教程</title> 
</head>
<body>

<form action="form-action.php">
<select name="cars" multiple>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>
<input type="submit">
</form>

<p>按住 Ctrl (windows) / Command (Mac) 按钮来选择多个选项。</p>

</body>
</html>

下拉数目

size

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>教程</title> 
</head>
<body>

<select size="3">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

</body>
</html>

提交前必须选

required

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>教程</title> 
</head>
<body>

<form action="demo_form.php">
<select required>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>
<input type="submit">
</form>

<p><b>注意：</b>几乎所有的主流浏览器都不支持 required 属性。</p>

</body>
</html>


Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post